Обслуживание изображений с высоким разрешением для отображения сетчатки

Ответ 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

Ответ 2

Я нашел это:

var retina = window.devicePixelRatio > 1;

это должно сделать retina return true, что вы могли бы использовать функцию if, чтобы обслуживать правильные изображения.

Источник: http://briancray.com/posts/detect-retina-displays-with-javascript

-InfiniDaZa

Ответ 3

Вам нужно знать о возможностях сети, отзывчивых изображениях и загрузке ресурсов.

До сих пор в javascript-решениях не было тихо, поскольку они обычно требуют, чтобы оба ресурса (изображения) загружались до обмена изображениями.

Лучше всего делать фоновые css-запросы, если вы не займете полным решением: http://adaptive-images.com здесь: https://vimeo.com/38947881