Что является лучшим способом, чтобы обнаружить поддержка Retina на устройстве с помощью JavaScript?

По данным все, что я'вэ недавно прочитал, браузеры движутся к "разрешению" медиа-выражение запроса. Это вместо устройства-пикселей соотношение`, который используется в настоящее время принято отвечать. Причина устройства-пикселей соотношение должны быть использованы только в качестве запасного варианта, потому что это не стандартный запрос СМИ.

По данным w3.org:

давным-давно, в WebKit решила медиа-запрос для разрешения экрана было необходимо. Но вместо того чтобы использовать уже стандартизированные разрешения запросов СМИ, они изобрели -в WebKit-устройства-пикселей соотношение.

Посмотреть полную статью

Резолюция СМИ документации запроса

Поскольку "резолюции" является унифицированной и, следовательно, будущее позвольте's польза, что первый в обнаружения для будущей защиты. Еще и потому, что я'м не уверен, если вы хотите обнаружить только высокого dppx устройства или только сетчатка(Apple, только) устройств, Я'ве добавил друг. Наконец, просто как Примечание, обнаружение iPhone просто агента пользователя нюхают так может'т быть зависит от. Примечание: для функции isRetina я'м с помощью dppx из 2 вместо 1,3, потому что все устройства с дисплеем Retina компания Apple 2dppx.

Примечание похоже, что МС края имеет некоторые проблемы с нецелым числом values

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);
}

Если вы хотите его для изображений, вы можете использовать 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)); 
        }
    }

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

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

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

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

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

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

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