我一直致力于让我们的 CMS 导出适用于移动设备的有效内容。我们遇到的一个问题是，较新的设备（如 iphone4）具有更高分辨率的显示屏，因此我们需要找到一种方法在使用 300dpi 显示屏的旧设备和新设备上正确呈现相同的页面。到目前为止，我们使用 javascript 和 window.devicePixelRatio 来获得 dpi 分辨率，但事实证明这在 opera(?) 和 opera mobile 中不起作用。
有什么建议或不同的方法吗？我研究了一下，但找不到东西。
谢谢
【问题讨论】：
标签： javascript android opera mobile-website
我认为你可能误解了 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 设备；它应该可以工作。
【讨论】：
font-size:16px; 应该在 326dpi 屏幕上看起来与 163dpi 屏幕相同，因为我谈到了像素缩放。我现在要对你的经历做出一个疯狂的猜测，所以如果我是对的，请告诉我：你在 326dpi 屏幕上看到小文本，因为你已经声明 <meta name="viewport" width="device-width"> 和 device-width 令人沮丧报告 物理 像素，而不是 CSS DIP。试试<meta name="viewport" width="320">。
device-width 使用 CSS DIP，应该优先于绝对值。
Opera Mobile 还没有devicePixelRatio，因为它几乎是 Apple 添加的非标准扩展。不过，我们正在考虑添加它，如果我们这样做，可能会出现在 Opera Mobile 的下一个版本中。但是，您不需要为此使用 JS。它也应该在带有设备像素比率（带有供应商前缀）的媒体查询中工作。
【讨论】：
.devicePixelRatio 是否已添加到 Opera Mobile 中有任何消息吗？
大家好，
josh3736 对 css 与设备像素问题给出了非常简洁的答案。只是想补充一点，大型高清图像似乎确实是一个问题，可能需要更具体地为单个 dpi 或 ppi 设备规范提供服务。搜索谷歌，我发现其他人（试图？）使用设备像素比作为基础来调整图像的大小以适应高 ppi 显示器，同时保持原始的高清。图像可用于这些设备并提供低分辨率。适用于没有高 dpi 显示器的手机的图像。这样一来，这些设备的图像质量更高，但相对于整个用户设备范围内的页面其余部分，其大小看起来相同。
我收集到的缩放功能似乎使这更有用，因为用户可以放大高清。图像并获得更多细节。粗略地说，这确实增加了处理的另一层复杂性，但随着越来越多的新高端设备进入市场，解决这一问题可能很重要。还在研究这个，如果有人有好的例子，请回帖。
【讨论】：