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

前端之家收集整理的这篇文章主要介绍了如何在iOS和Android上正确使用-webkit-device-pixel-ratio?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
-webkit设备像素比查询由iOS和 Android支持,但由于iOS不支持target-densitydpi = device-dpi,因此导致不同的结果.例如:
@media screen and (-webkit-device-pixel-ratio: 2) {
    body { font-size: 2em; }
}

会使Galaxy Nexus上的字体看起来不错,但是在iPhone 4上它会变得太大了.

有没有办法在iOS上模拟target-densitydpi = device-dpi,或者在iOS上禁用-webkit-device-pixel-ratio,并将其用户的模糊图像作为备用模式?

解决方法

@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/

猜你在找的iOS相关文章