css媒体类型“掌上电脑”关心的参数是什么?

时间:2012-06-03 18:41:19

标签: screen media-queries screen-resolution screen-size handhelddevice

我需要更改页面上的样式,具体取决于它是手持设备(如手机)还是大屏幕设备,如笔记本电脑,固定电脑或平板电脑。

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

因此,我需要了解的不仅仅是分辨率,还要知道它是否是小屏幕设备。 (我假设媒体=“掌上电脑”的CSS风格是要走的路。如果我错了请纠正我。)

那么:css媒体类型“掌上电脑”关心的参数是什么?

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

谢谢!

1 个答案:

答案 0 :(得分:8)

handheld媒体类型基本上没用,因为当前一代智能手机和类似设备(至少是Android和iOS股票浏览器)不会使用它来避免为旧设备设计超级最小格式。

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

,无论何时实际上,您都不应该针对特定设备进行设计,只能使您的网站在任何范围内正常运行(目前的流行语是响应式设计,并且已经写了很多关于这方面的技术)。我个人的方法是几乎完全按照em(行高单位)编写样式表,然后在特定布局仅适用于特定大小范围的情况下使用媒体查询来切换布局;并且由于大小是根据em定义的,因此媒体查询也应该以{{1​​}}来表示。这样做的好处是字体大小是合理代理屏幕上项目的合理显示大小 - 反映观看距离和(如果用户花时间配置浏览器)用户的眼睛/手部能力。