Html 在CSS中检测手机或平板电脑等小型设备的最佳方法是什么？

当我读到关于响应性设计的文章时，人们总是使用以下语句： @媒体屏幕和屏幕（最大宽度：）

但是今天的手机似乎有很好的分辨率（通常比个人电脑还高），检测小型设备的最佳方法是什么

---

Thx；=）

您不能直接查询物理大小

但是，您可以对DPI以及高度和宽度执行媒体类型查询

范例

@media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
   // Iphone 5s
}

---

这应该是一个很好的起点：

当您进行响应式设计时，您实际上不会“检测”屏幕大小，而是使用CSS媒体查询“确定”各种大小

---

例如，如果您使用的是类似于Modernizer的库，那么您实际上就是在检测各种属性。

屏幕分辨率并不重要。媒体查询中使用的值是设备宽度。例如：

我的手机屏幕分辨率为1280x720像素。竖直放置时（在纵向模式下），宽度为720px，但由于它是高清屏幕，因此具有200%的比率，由此产生的设备宽度为360px。这是媒体查询中使用的值：

/* Even though my phone has a screen width of 720px… */

@media screen and (max-width: 360px) {
     /* 
      * This code will apply 
      */
}

@media screen and (min-width: 361px) {
     /* 
      * This code will not apply
      */
}

---

一般规则是，处于纵向模式的手机的设备宽度小于或等于400px，无论其屏幕包含多少实际像素。

物理像素和CSS像素在retina/HD移动显示器上不相同

研究视口元标记以获取有关设备宽度的信息。i、 e.

是缩放为100%的CSS像素宽度

---

有关常用手机屏幕尺寸的列表，请参阅。

什么是“更小”？按像素还是按物理尺寸？我的~4英寸galaxy nexus的像素比10英寸ipad 2的像素还要多……是的，这就是问题所在。你不能通过分辨率来检测设备的大小。理论上，你应该能够像在css中一样使用真实世界的单位<代码>12英寸或

5厘米

。不过，我从没试过。CSS渲染引擎应该处理获取设备屏幕规格和DPI评级的必要工作，并将这些现实世界的单位转换为物理像素测量值。CSS 1in始终是96px（）。我应该创建并维护一个所有移动设备的列表来实现这一点吗？应该是这样吗？？没有检测小屏幕移动设备的通用解决方案？正在试用阈值为400px的索尼Xperia Z1 Compact。不工作（Xperia上的Chrome浏览器显示与桌面浏览器相同）。真的没有其他检测小屏幕设备的解决方案吗？

这会在Xperia上加载*normal.css“。我必须将宽度阈值至少设置为980像素，才能在Xperia上加载mobile.css。@Steffen-Hm，我不确定

媒体

属性的浏览器支持是什么样的。我使用了一个带有

@media

的样式表，在Motorola Moto X2（在chrome和firefox上）上测试，结果完全相同。如果它的横向模式或potrait模式（宽度阈值在任何情况下都是980px），也没有什么不同。同样有趣的是，谷歌移动测试端的响应也完全相同。可能在Android 5.x上，阈值在任何情况下都是980像素…嗨，Sime！找到了！我必须将

添加到HTML中。然后你的规则似乎是正确的。另见“鲨鱼队”的答案。谢谢。这个加上“西蒙·维达斯”的答案对我来说似乎没问题。谢谢