我需要根据它是手持设备(如手机)还是大屏幕设备(如笔记本电脑、固定式 PC 或平板电脑)来更改页面上的样式。
我知道我可以通过 css 最大宽度查询等方式检测分辨率,但这并不令人信服。主要是因为今天的智能手机具有如此高分辨率的屏幕。即索尼Xperia S,它有一个720p×1280的屏幕,但它只有4,3英寸。因此,在普通计算机屏幕上可读的 10px 字体将变得太小而无法阅读。
因此,我需要知道的不仅仅是分辨率,以了解它是否是小屏幕设备。 (我认为media="handheld" css风格是要走的路。如果我错了,请纠正我)。
那么:css媒体类型"手持"关心哪些参数?
- 设备屏幕尺寸?
- 浏览器窗口大小?
- 带宽?
- 设备是否为"手持"信息是否只是客户端传递的参数?
- 平板电脑是否包含在"手持"设备中?
等。
谢谢!
handheld
媒体类型在很大程度上是无用的,因为当前一代智能手机和类似设备(至少是Android和iOS股票浏览器)不使用它来避免被赋予为旧设备设计的超最小格式。
我建议使用媒体查询。请注意,您可以查询分辨率和大小,并且可以以物理单位(英寸、pt、cm)和像素为单位查询大小。(但是,我不知道设备是否报告了相当准确的物理单元大小。
但是,只要可行,您就不应该针对特定设备进行设计,而应该使您的网站在任何规模下都能正常工作(当前的流行语是响应式设计,并且已经写了很多关于此技术的文章)。我个人的方法是几乎完全按照em
(行高单位)编写样式表,然后在特定布局仅在特定大小范围内运行良好的情况下使用媒体查询切换布局;由于大小是根据em
定义的,媒体查询也应该根据em
来编写。这样做的好处是,字体大小是屏幕上项目的合理显示大小的合理代理 - 反映观看距离和(如果用户花时间配置他们的浏览器)用户的眼睛/手的能力。