Как лучше всего определить поддержку Retina на устройстве с помощью JavaScript?
В данный момент я использую следующую функцию:
function is_retina_device() {
return window.devicePixelRatio > 1;
}
Однако, ее простота меня настораживает. Существует ли более тщательная проверка на наличие устройства с ретина-дисплеем?
2 ответ(ов)
На самом деле, код, который вы используете в своем вопросе, совершенно правильный, если вас интересуют только современные браузеры. (Смотрите: http://caniuse.com/#feat=devicepixelratio)
Все современные браузеры поддерживают эту функцию, а для старых браузеров будут загружаться изображения с более низким разрешением. Я не ожидаю, что IE10 и ниже появятся на ретина-устройствах или устройствах с высоким разрешением. К тому же, использование CSS-проверок в JavaScript более странно, чем использование встроенного свойства окна.
Поддержка свойства devicePixelRatio в браузерах даже лучше, чем спецификация разрешения. (Смотрите: http://caniuse.com/#feat=css-media-resolution)
Я бы сказал, что это действительно безопасно использовать; мы применяем это на производственных сайтах с более чем 10 миллионами посещений в месяц. Работает так, как ожидается.
Единственное, что я бы изменил - это название функции, так как необходимость загрузки изображений высокого разрешения не обязательно означает, что экран является ретина. На самом деле, вы даже не нуждаетесь в числовой проверке, так как undefined > 1
возвращает false
.
function is_high_resolution_screen() {
return window.devicePixelRatio > 1;
}
devicePixelRatio
действительно может быть ненадежным, особенно в контексте изменения масштаба страницы. Когда вы увеличиваете масштаб до 200%, window.devicePixelRatio
возвращает значение 2, даже если ваш дисплей не является Retina. Это происходит потому, что devicePixelRatio
отражает коэффициент пикселей устройства относительно CSS-пикселей, но не учитывает изменения масштаба, применяемые браузером.
Если вам нужно надежно определить тип дисплея (обычный или Retina), рекомендуется использовать дополнительные методы и проверять особенности устройства, такие как размер физического экрана и разрешение. Например, можно использовать window.screen
для получения информации о разрешении экрана и производить вычисления с учетом плотности пикселей. В этой ситуации важно не полагаться только на devicePixelRatio
для определения характеристик дисплея.
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
Как определить нажатие клавиши Esc?
Как получить данные формы с помощью JavaScript/jQuery?
Как выполнить код после сброса HTML-формы с помощью jQuery?