Html 如何仅使用 CSS 移动屏幕进行检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42025632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect ONLY with CSS mobile screens
提问by Max
I've found a lot of threads here talking about CSS and mobile screens.
我在这里找到了很多讨论 CSS 和移动屏幕的主题。
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.
经过我的搜索，我找不到某些设备的解决方案。例如：摩托罗拉 Moto G4 Plus 使用 FULL HD 宽度（1080px），只有引导程序检测 xs-view 配置。
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?
那么，我如何使用与 Bootstrap 相同的程序来设置我的样式以及所有设备的一般程序？
Please, only CSS or as much JS(if it possible, don't), the same as bootstrap.
请仅使用 CSS 或尽可能多的 JS（如果可能，请不要使用），与引导程序相同。
I've tried @media screen and @media all queries. Doesn't work.
我试过@media screen 和@media all 查询。不起作用。
Thanks for reading.
谢谢阅读。
回答by Virgil de Meijer
The @media rule is used to define different style rules for different media types/devices.
@media 规则用于为不同的媒体类型/设备定义不同的样式规则。
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?
早期帖子： 如何编写针对所有移动设备和平板电脑的 CSS 媒体查询？
W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
W3schools：http: //www.w3schools.com/cssref/css3_pr_mediaquery.asp
回答by tzador
CSS media query works, but what about ipads with big screens? You can do the following with javascript:
CSS 媒体查询有效，但是大屏幕的 ipad 呢？您可以使用 javascript 执行以下操作：
if (window.orientation !== undefined) {
document.body.classList.add("mobile");
}
