Ответ 1
Зачем устанавливать Retina
iPhone 4s, iPhone 5, iPad3, iPad4, Macbook 15 ", Macbook 13" все используют дисплей Retina.
Android также поддерживает дисплей с высоким разрешением, а также Windows 8 (Lumia 920), как упоминалось в @JamWaffles.
Добавление поддержки высокого разрешения подходит для пользователей, но это определенно добавляет нагрузку для разработчика, а также пропускную способность для мобильных устройств. Кто-то не предлагает этого делать. (Петр-Поль Кох, см. Нижнее "дальнейшее чтение" )
Breifing
Существует два метода для реализации этой функции. Один из них - Javascript, а другой - CSS. Все текущие решения для Retina, но могут легко распространяться на Android с высоким разрешением.
Решение CSS - это запрос СМИ и -webkit-min-device-pixel-ratio или -webkit-device-pixel-ratio
- Прост в использовании.
- Применить ко всем браузерам.
- Недостаток: Хорошо для фона. Трудно для тега
<img>
Решение Javascript - это свойство window.devicePixelRatio.
- Преимущество: Javascript может управлять источником изображения. Итак, если вы собираетесь использовать прямой образ вместо фона, лучше использовать Javascript
- Невозможно применить ко всем браузерам, но текущая поддержка достаточно хороша. См. Ниже список.
- Требуется немного больше настроек.
Решение для CSS
Для обычных изображений, например, значок
.sample-icon {
background-image: url("../images/sample-icon.png");
background-size: 36px 36px;
}
Для Retina добавьте ниже
@media only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
(min-resolution: 192dpi) /* Everyone else */ {
.sample-icon {
background-image: url("../images/sample-icon-highres.png");
background-size: 18px 18px;
}
Вы можете использовать min-resolution: 2dppx для замены min-resolution: 192dpi, для тех, кто не хочет запоминать числа
Обратите внимание на разницу:
- Два разных значка, один нормальный, один высокий. Значок с высоким разрешением имеет двойной размер, чем обычный.
- Размер фона. Позднее половина. Но вам нужно проверить его в своем реальном использовании.
Ресурс: + http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ + http://view.jquerymobile.com/master/demos/widgets/buttons/#CustomIcons
Javascript Solution
Используйте свойство window.devicePixelRatio для определения разрешения.
if (window.devicePixelRatio >= 2) {
alert("This is a Retina screen");
//Do something to manipulate image url attribute
//for example add `@2x-` before all image urls
}
Safari, Android WebKit, Chrome 22+ и Android, Opera Mobile, BlackBerry WebKit, QQ, Palm WebKit, Ссылка: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
Для Android
Android-устройство использует 1,5 в качестве высокого разрешения вместо 2 в Retina. http://developer.android.com/guide/webapps/targeting.html - # Таргетирование плотности устройства с помощью CSS, #Targeting Плотность устройства с помощью JavaScript
Дальнейшее хорошее чтение
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html "Я не большой поклонник обслуживания специальных изображений сетчатки, потому что это делает Интернет слишком тяжелым - особенно по мобильному соединению. Тем не менее, люди это сделают". - Петр-Поль Кох
Обновление 2013-04-18 Обновление мобильной связи jQuery