screen - css媒体类型 "handheld"关心哪些参数？

Question

我需要根据它是手持设备(例如手机)还是大屏幕设备(例如笔记本电脑、固定式电脑或平板电脑)来更改页面上的样式。

我知道我可以通过 css max-width 查询等来检测分辨率，但这并不令人信服。主要是因为今天的智能手机拥有如此高分辨率的屏幕。 IE。索尼 Xperia S 的屏幕分辨率为 720p x 1280，但尺寸仅为 4.3 英寸。在普通计算机屏幕上可以阅读的 10px 字体将变得太小而无法阅读。

因此，我需要了解的不仅仅是分辨率，才能知道它是否是小屏幕设备。 (我认为 media="handheld"css 样式是正确的选择。如果我错了，请纠正我)。

那么:css媒体类型“handheld”关心哪些参数？

• 设备屏幕尺寸？
• 浏览器窗口大小？
• 带宽？
• 设备是否“手持”的信息是否只是客户端传递的参数？
• 平板电脑是否属于“手持”设备？

等等

谢谢!

Answer 1

手持媒体类型在很大程度上是无用的，因为当前一代智能手机和类似设备(至少是 Android 和 iOS 原生浏览器)不使用它来避免获得为旧设备设计的超最小格式.

我建议使用媒体查询。请注意，您可以查询分辨率和尺寸，并且可以查询物理单位(in、pt、cm)和像素的尺寸。 (但是，我不知道设备是否报告相当准确的物理单位大小。)

但是，只要可行，您不应该针对特定设备进行设计，而应该让您的网站在任何规模上都能正常运行(当前的流行词是响应式设计，并且已经有很多关于这方面技术的文章)。我个人的方法是几乎完全按照 em(行高单位)编写样式表，然后使用媒体查询来切换布局，以防特定布局仅在特定情况下运行良好尺寸范围;由于大小是用 em 定义的，媒体查询也应该用 em 编写。这样做的优点是字体大小是屏幕上项目合理显示大小的合理代理 - 反射(reflect)了观看距离和(如果用户已花时间配置浏览器)用户的眼睛/手的能力。