Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect ONLY with CSS mobile screens

I've found a lot of threads here talking about CSS and mobile screens.

After searching, I couldn't find a solution for some devices. For example: Motorola Moto G4 Plus uses FULL HD width(1080px), only bootstraps detect the xs-view configuration.

Styling and trying and trying I couldn't get some styles set up.

So, how can I make the same procedure as Bootstrap to set up my styles and in the general procedure for all devices?

Please, only CSS or as much JS(if it possible, don't), the same as bootstrap.

I've tried the @media screen and @media all queries. Doesn't work.

Thanks for reading.

like image 868
Max Avatar asked Feb 03 '17 13:02

Max


People also ask

Can we use CSS in mobile?

If you are the owner of an iPhone, Android device or other device that has a browser which supports media queries you can test your CSS yourself. However you will need to upload the code somewhere in order to view it.

How do you display or hide website content on mobile devices using CSS?

Solutions with CSS To hide an element in a responsive layout, we need to use the CSS display property set to its "none" value along with the @media rule. The content of the second <p> element having a "hidden-mobile" class will be hidden on devices smaller than 767px.

What does @media screen do CSS?

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.


2 Answers

All touch screen and mobile devices (including tablets, smartphones) can be detected with css with the following @media rule.

@media only screen and (hover: none) and (pointer: coarse){  /* Regular CSS rules here*/  } 
like image 63
Effie13 Avatar answered Sep 27 '22 20:09

Effie13


The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {     /* Styles */ }      @media only screen and (max-device-width: 768px) {     /* Styles */ } 

Earlier post: How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

like image 34
VMeijer Avatar answered Sep 27 '22 22:09

VMeijer