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

Question

我一直致力于为移动设备制作CMS导出有效内容。我们遇到的一个问题是，像iphone4这样的新设备具有更高分辨率的显示器，因此我们需要找到一种方法在旧设备上正确渲染同一页面，而使用300dpi显示器则更新。到目前为止，我们使用javascript和window.devicePixelRatio来获得dpi分辨率，但事实证明这在Opera（？）和opera mobile中不起作用。

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

由于

Answer 1

我想你可能会误解devicePixelRatio真正告诉你的事情 - 惊讶，a pixel is not a pixel!

在CSS中指定像素大小时，必须指定物理像素的大小。相反，CSS px单元实际上是“设备无关像素”（DIP），即relative to the device's 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之间的差异，样式{ width:100px; height:100px; }的HTML元素应该在旧设备和高DPI iPhone 4上呈现大致相同的大小，因为它重新调整像素值。

因此，您无需使用脚本来考虑高DPI设备;它应该工作。

Answer 2

Opera Mobile还没有devicePixelRatio，因为它几乎是Apple添加的非标准扩展程序。我们正在考虑添加这个，如果我们这样做，可能会在Opera Mobile的下一个版本中添加。但是，您不需要使用JS。它应该在媒体查询中使用设备像素比（带有供应商前缀）。

Answer 3

全部，

josh3736给出了css vs设备像素问题的一个非常好的和简洁的答案。只是想补充说，它似乎是一个大型高清图像的问题，可能需要更专门地为个人dpi或ppi设备规格提供服务。搜索谷歌，我发现其他人（试图？）使用设备像素比作为基础来调整较小的高ppi显示图像，同时保持原始的高清。图像可用于这些设备并提供低def。没有高dpi显示的手机图像。这样，这些设备的图像质量更高，但相对于用户设备范围内的其他页面，图像的大小相同。

缩放功能似乎使我收集它更有用，因为用户可以放大高清。图像并获得更多细节。粗略地说，这确实增加了另一层复杂性，但随着我们有越来越多的新高端设备进入市场，这可能很重要。仍然在研究这个问题，所以如果有人有好的例子那么回帖。