window.pixelRatio在Opera中不起作用.还有其他选择

Question

我一直致力于为移动设备制作CMS导出有效内容.其中一个我们遇到的问题是,新的设备,如iPhone4的拥有更高分辨率的显示,所以我们需要找到一种方法来正确地呈现在使用一个300DPI显示旧设备和新的同一页面.到目前为止,我们使用JavaScript和window.devicePixelRatio为了获得dpi的分辨率,但事实证明,这不是在歌剧(？)和Opera移动工作.

任何建议或可能是不同的方法？我研究了一下但是找不到一些东西.

谢谢

Answer 1

我想你可能会误解devicePixelRatio真正告诉你的是什么- 出乎意料的是,像素不是一个像素!

在CSS中指定像素大小时,不一定要指定物理像素的大小.代替CSS px单元实际上是"设备无关的像素"(DIP),这是相对于到设备的DPI:

像素单位是相对于观看设备的分辨率,即最常见的是计算机显示器.如果输出设备的像素密度与典型的计算机显示器的像素密度非常不同,则用户代理应该重新缩放像素值.

参考像素定义为96dpi(Windows的默认DPI设置),因此在您的计算机上,1 DIP(CSS px)= 1个物理屏幕像素确实如此.此外,即使较旧的iOS设备的物理DPI为163,它们仍然使用1 DIP = 1像素.然而,在iPhone 4的双倍分辨率326 DPI,1 DIP = 2屏幕像素,这devicePixelRatio = 2是告诉你的.

因此,严格地说明iPhone 3和iPhone 4之间的差异,具有该样式的HTML元素{ width:100px; height:100px; }应该在旧设备和较高DPI iPhone 4上呈现大致相同的大小,因为它重新调整像素值.

所以你没有理由不得不使用脚本来解释高DPI设备; 它应该工作.