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

Question

-webkit-device-pixel-ratioiOS和Android都支持查询,但由于iOS不支持target-densitydpi=device-dpi它会导致不同的结果.例如:

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

将使Galaxy Nexus上的字体看起来很好,但在iPhone 4上它会太大了.

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

Answer 1

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