Как правильно использовать-webkit-device-pixel-ratio на iOS и Android?

-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 он будет слишком большим.

есть ли способ, чтобы эмулировать target-densitydpi=device-dpi на iOS без JavaScript или отключить -webkit-device-pixel-ratio на iOS и оставить своих пользователей с размытыми изображениями в качестве запасного варианта?

10
android css css3 mobile 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/

6