How to detect ONLY with CSS mobile screens

问题

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

After my searching, i couldn't find 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 setted up.

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

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

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

Thanks for reading.

回答1:

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 somewere.

Example:

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

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

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

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

回答2:

CSS media query works, but what about ipads with big screens? You can do the following with javascript:

if (window.orientation !== undefined) {
  document.body.classList.add("mobile");
}

来源：https://stackoverflow.com/questions/42025632/how-to-detect-only-with-css-mobile-screens

标签

html

css

mobile

responsive