我一直致力于让我们的 CMS 为移动设备导出有效内容。我们遇到的一个问题是较新的设备，如 iphone4 具有更高分辨率的显示器，因此我们需要找到一种方法来在旧设备和使用 300dpi 显示器的较新设备上正确呈现相同的页面。到目前为止，我们使用 javascript 和 window.devicePixelRatio 来获得 dpi 分辨率，但事实证明这在 opera(?) 和 opera mobile 中不起作用。
有什么建议或不同的方法吗？我进行了一些研究，但无法找到一些东西。
谢谢
最佳答案
我认为您可能误解了 devicePixelRatio 真正告诉您的是什么 — 惊喜，a pixel is not a pixel!
当您在 CSS 中指定像素大小时，您不一定以物理像素指定大小。相反，CSS px 单位实际上是一个“设备无关像素”(DIP)，即 relative to the device's DPI:
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
引用像素定义为 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; 样式的 HTML 元素；高度:100px； 在旧设备和更高 DPI 的 iPhone 4 上应该以大致相同的尺寸呈现，因为它重新调整了像素值。
因此，您没有理由必须使用脚本来处理高 DPI 设备；它应该可以正常工作。
关于javascript - window.pixelRatio 在 Opera 中不起作用。还有其他选择吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4366148/