Search code examples
androidmobilecssmobile-safari

How to properly use -webkit-device-pixel-ratio on iOS and Android?

-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?

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