6

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

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

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

那么：css媒体类型“手持”关心什么参数呢？

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

等等

谢谢！

4

1 回答 1

9

媒体类型在handheld很大程度上是无用的，因为当前一代的智能手机和类似设备（至少 Android 和 iOS 股票浏览器）不使用它来避免为旧设备设计的超最小格式。

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

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

于 2012-06-03T19:05:41.653 回答