如何在 iOS 和 Android 上正确使用 -webkit-device-pixel-ratio？答案

【问题标题】：How to properly use -webkit-device-pixel-ratio on iOS and Android?如何在 iOS 和 Android 上正确使用 -webkit-device-pixel-ratio？
【发布时间】：2012-02-10 13:31:21
【问题描述】：

-webkit-device-pixel-ratio 查询被 iOS 和 Android 支持，但由于 iOS 不支持 target-densitydpi=device-dpi 它会导致不同的结果。例如：

@media screen and (-webkit-device-pixel-ratio: 2) {
    body { font-size: 2em; }
}

会使字体在 Galaxy Nexus 上看起来不错，但在 iPhone 4 上会太大。

有没有办法在没有 JavaScript 的情况下在 iOS 上模拟 target-densitydpi=device-dpi，或者在 iOS 上禁用 -webkit-device-pixel-ratio 并让用户看到模糊的图像作为后备？

【问题讨论】：

标签： android mobile css mobile-safari

【解决方案1】：

@media (-webkit-min-device-pixel-ratio: 2), /* Retina on Webkit */
       (min-resolution: 192dpi)             /* Everyone else */ {
...
}

我今天偶然读到的这篇很棒的文章： http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

【讨论】：