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

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

10 голосов
/ 10 февраля 2012
Запрос

-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 и оставить своих пользователей с размытыми изображениями в качестве запасного варианта?

1 Ответ

6 голосов
/ 15 июня 2012 
@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/

...