如何使用CSS移动屏幕进行检测

Question

我在这里发现了许多关于CSS和移动屏幕的线索。

在我搜索之后，我无法找到某些设备的解决方案。例如：摩托罗拉Moto G4 Plus使用全高清宽度（1080px），只有bootstraps检测xs-view配置。

造型，尝试和尝试我无法设置一些样式。

那么，我如何制作与Bootstrap相同的程序来设置我的样式以及所有设备的一般程序？

请，只有CSS或尽可能多的JS（如果可能的话，不要），与bootstrap相同。

我已经尝试了@media屏幕和@media所有查询。不行。

感谢阅读。

Answer 1

使用以下@media规则，可以使用CSS检测所有触摸屏和移动设备（包括平板电脑，智能手机）。

@media only screen and (hover: none) and (pointer: coarse){

/* Regular CSS rules here*/

}

Answer 2

@media规则用于为不同的媒体类型/设备定义不同的样式规则。

如果它不起作用，请检查您的代码。你可能会犯一个错字。

示例：

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

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

早期帖子： How to code CSS media queries targeting ALL mobile devices and tablets?

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

Answer 3

CSS媒体查询有效，但是大屏幕的iPad呢？ 您可以使用javascript执行以下操作：

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