我一直致力于为移动设备制作CMS导出有效内容。我们遇到的问题之一是像iphone4这样的新设备具有更高分辨率的显示器，因此我们需要找到一种方法在旧设备上正确渲染相同的页面，而使用300dpi显示器的新设备则更新。到目前为止，我们使用javascript和window.devicePixelRatio来获得dpi分辨率，但事实证明这不适用于opera（？）和opera mobile。window.pixelRatio在Opera中不起作用。任何选择？
任何建议或可能是一个不同的方法？我研究了一下，但无法找到一些问题。
感谢
我想你可能误会什么devicePixelRatio真正告诉你—惊喜，a pixel is not a pixel!
当您指定在CSS的像素大小，你不是一定在物理像素指定尺寸。相反，CSS单元实际上是“设备无关像素”（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设备;它应该只是工作。
Opera Mobile还没有devicePixelRatio，因为它几乎是Apple添加的非标准扩展。不过，我们正在考虑增加这个功能，如果我们这样做，可能会在Opera Mobile的下一个版本中。然而，你不需要使用JS。它也应该在媒体查询中以设备像素比率（使用供应商前缀）工作。
大家好，
josh3736给了一个很不错的，简洁的答案CSS VS设备像素问题。只是想补充一点，它似乎是一个大型高清晰度图像的问题，可能需要针对个别dpi或ppi设备规格更具体地提供。搜索谷歌，我发现其他人（试图？）使用设备 - 像素比作为基础，调整图像的大小，以便高ppi显示，同时保持原来的高清晰度。可用于这些设备的图像并提供低清晰度。无需高分辨率显示屏的手机图像。这样一来，这些设备的图像质量就更高，但在整个用户设备范围内，相对于页面的其余部分看起来大小相同。
缩放的能力似乎使我收集更有用，因为用户可以放大高清。图像并获得更多细节。这样做的确会增加另一层复杂性，但是随着越来越多的新高端设备进入市场，解决这个问题可能很重要。仍在研究这个问题，所以如果有人有好的例子，请回复。
我明白了你的观点，但是如何处理文本，按钮，图形等其他元素。我的意思是，在100 dpi左右的显示器上，16px的字体看起来不错，但在300dpi的显示器上很小。 – mspir 2010-12-07 20:56:09
所有其他的都是相同的，由于我提到的像素缩放，`font-size：16px;`*应该*在* 326dpi屏幕上应该看起来与163dpi屏幕相同。我现在要猜测你正在经历什么，所以让我知道我是否正确：因为你已经声明了`和`device-width`令人沮丧地报告**物理**像素，而不是CSS DIP。试试``。 – josh3736 2010-12-07 21:25:48