Как стать автором
Обновить

Распознаём retina-дисплеи джаваскриптом

Время на прочтение 1 мин
Количество просмотров 11K
Автор оригинала: Brian Cray
Я отыскивал способ выяснить DPI устройства для употребления в мобильном дизайне. Я ещё не обнаружил его, зато нашёл приём для выяснения того, пользуется ли читатель сайта сетчаточным дисплеем. Вот как без хлопот достичь этого:
var retina = window.devicePixelRatio > 1 ? true : false;

Теперь переменная retina примет значение true, если у читателя сетчаточный дисплей. В дальнейшем можно использовать простой оператор if, чтобы выполнить тот или иной код в зависимости от типа дисплея.

if (retina) {
    // у читателя дисплей типа retina
}
else {
    // у читателя дисплей не типа retina
}

Зачем?

Вот хороший пример: если у меня на сайте иллюстрация (или видео) размером 100×100, то вышеприведённый код посоветует мне скачать иллюстрацию повышенного размера (200×200), чтобы она выглядела чётко на iPhone 4 — а пользователям других устройств не придётся скачивать картинку 200×200 без нужды. Ведь скорость особенно важна для мобильных пользователей.

if (retina) {
    var html = '<img src="200x200.jpg" width=100 height=100>';
} else {
    var html = '<img src="100x100.jpg" width=100 height=100>';
}
Теги:
Хабы:
+9
Комментарии 31
Комментарии Комментарии 31

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн