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

Question

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

在我搜索之后,我找不到某些设备的解决方案.例如:摩托罗拉Moto G4 Plus使用全高清宽度(1080px),只有bootstraps检测xs-view配置.

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

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

请,只有CSS或尽可能多的JS(如果可能的话,不要),与bootstrap相同.

我试过@media screen和@media所有查询.不行.

谢谢阅读.

Answer 1

所有触摸屏和移动设备（包括平板电脑、智能手机）都可以通过 css 使用以下 @media 规则进行检测。

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

/* Regular CSS rules here*/

}

有效，即使只使用我之前使用过的“(hover: none)”，它也可以工作，但我想将其优化到完美，谢谢你。“only”关键字可防止不支持具有媒体功能的“media”查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。 (3认同)
@haZh 的答案也适用于我。这应该是最重要的答案。 (2认同)

Answer 2

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

如果它不起作用,请检查您的代码.你可能会犯一些错字.

例:

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

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