问题描述:

-webkit-device-pixel-ratio query is supported by both iOS and Android but since iOS does not support target-densitydpi=device-dpi it leads to different results. For example:

@media screen and (-webkit-device-pixel-ratio: 2) {

body { font-size: 2em; }

}

will make font look good on Galaxy Nexus, but on iPhone 4 it will be too big.

Is there a way to emulate target-densitydpi=device-dpi on iOS without JavaScript or to disable -webkit-device-pixel-ratio on iOS and leave its users with blurry images as a fallback?

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

from this great article I incidentally read today: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

相关阅读:
Top