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