0

Как лучше всего определить поддержку Retina на устройстве с помощью JavaScript?

12

В данный момент я использую следующую функцию:

function is_retina_device() {
    return window.devicePixelRatio > 1;
}

Однако, ее простота меня настораживает. Существует ли более тщательная проверка на наличие устройства с ретина-дисплеем?

2 ответ(ов)

0

На самом деле, код, который вы используете в своем вопросе, совершенно правильный, если вас интересуют только современные браузеры. (Смотрите: 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;
}
0

devicePixelRatio действительно может быть ненадежным, особенно в контексте изменения масштаба страницы. Когда вы увеличиваете масштаб до 200%, window.devicePixelRatio возвращает значение 2, даже если ваш дисплей не является Retina. Это происходит потому, что devicePixelRatio отражает коэффициент пикселей устройства относительно CSS-пикселей, но не учитывает изменения масштаба, применяемые браузером.

Если вам нужно надежно определить тип дисплея (обычный или Retina), рекомендуется использовать дополнительные методы и проверять особенности устройства, такие как размер физического экрана и разрешение. Например, можно использовать window.screen для получения информации о разрешении экрана и производить вычисления с учетом плотности пикселей. В этой ситуации важно не полагаться только на devicePixelRatio для определения характеристик дисплея.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь