Каков наилучший способ обнаружения поддержки сетчатки на устройстве с использованием JavaScript?

Ответ 1

В соответствии со всем, что я читал недавно, браузеры, похоже, движутся к выражению resolution media query. Это вместо device-pixel-ratio, которое используется в принятом в настоящее время ответе. Причина, по которой device-pixel-ratio следует использовать только как резерв, состоит в том, что это не стандартный медиа-запрос.

Согласно w3.org:

Когда-то Webkit решил, что необходим медиа-запрос для разрешения экрана. Но вместо использования уже стандартизованного мультимедийного запроса разрешения они изобрели -webkit-device-pixel-ratio.

Просмотр полной статьи

Резолюция Media Query Documentation

Так как resolution стандартизирован, и поэтому будущее позволяет использовать это сначала в обнаружении для будущей проверки. Кроме того, поскольку я не уверен, что вы хотите обнаруживать только высокие устройства dppx или только устройства только сетчатки (только Apple), я добавил один из них. Наконец, как замечание, обнаружение Apple - это просто нюхание агента пользователя, поэтому на него нельзя влиять. Примечание: для функции isRetina я использую dppx из 2 вместо 1.3, потому что все устройства apple сетчатки имеют 2dppx.

function isHighDensity(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}


function isRetina(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}

Ответ 2

Если вы хотите его для изображений, вы можете использовать retinajs, или этот код является общим ответом для его обнаружения:

function isRetinaDisplay() {
        if (window.matchMedia) {
            var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
            return (mq && mq.matches || (window.devicePixelRatio > 1)); 
        }
    }

Ответ 3

Собственно, код, который вы используете в своем вопросе, совершенно прав, если вы заботитесь только о современных браузерах. (См.: http://caniuse.com/#feat=devicepixelratio)

Все современные браузеры реализованы, и более старые браузеры будут просто обслуживать ваши изображения с низким разрешением. Я не ожидаю, что IE10- появится на устройстве сетчатки/высокого разрешения. Кроме того, использует проверки CSS в JavaScript не более странно, чем использование собственного свойства окна?

Heck, поддержка браузера devicePixelRatio даже лучше, чем спецификация разрешения. (См.: http://caniuse.com/#feat=css-media-resolution)

Я бы сказал, что это действительно очень безопасно использовать, мы используем его на веб-сайтах с более чем 10 миллионами посетителей в месяц. Работает как ожидалось.

Единственное, что я изменил, это имя функции, так как необходимость загрузки изображений с высоким разрешением не означает, что экран сетчатки. На самом деле вам даже не нужна проверка числа, так как undefined > 1 приводит к false.

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

Ответ 4

devicePixelRatio не является надежным вообще. при увеличении до 200% окно window.devicePixelRatio вернет вам 2, но вы не находитесь на экране сетчатки.