Apa cara terbaik untuk mendeteksi retina dukungan pada perangkat yang menggunakan JavaScript?

Sesuai untuk segala sesuatu yang saya've baca baru-baru ini, browser tampaknya akan bergerak menuju resolusi permintaan media ekspresi. Ini bukan perangkat-pixel-rasio yang sedang digunakan pada saat ini jawaban yang diterima. Alasan mengapa perangkat-pixel-rasio hanya boleh digunakan sebagai fallback adalah karena tidak standar media query.

Menurut w3.org:

Sekali waktu, Webkit memutuskan media query untuk resolusi layar yang dibutuhkan. Tapi daripada menggunakan yang sudah-resolusi standar media query, mereka diciptakan-webkit-perangkat-pixel-rasio.

Lihat Artikel Lengkap

Resolusi Permintaan Media Dokumentasi

Sejak resolusi adalah standar dan oleh karena itu masa depan let's menggunakan yang pertama di deteksi untuk pemeriksaan masa depan. Juga karena saya'm tidak yakin jika anda ingin mendeteksi hanya tinggi dppx perangkat atau hanya retina(Apple hanya) perangkat, I've menambahkan salah satu dari masing-masing. Akhirnya sebagai catatan, Apple deteksi adalah hanya user agent mengendus agar bisa't tergantung on. Catatan: untuk isRetina fungsi I'm menggunakan dppx 2 bukan 1.3 karena semua retina perangkat apple memiliki 2dppx.

Catatan tampak bahwa MS Edge memiliki beberapa masalah dengan non-integer 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);
}

Jika anda ingin untuk gambar anda dapat menggunakan retinajs atau kode ini adalah respon umum untuk mendeteksi:

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

Sebenarnya, kode anda're menggunakan dalam pertanyaan anda adalah hanya benar-benar tepat jika anda hanya peduli tentang browser modern. (Lihat: http://caniuse.com/#feat=devicepixelratio)

Semua browser modern memiliki itu dilaksanakan, dan browser yang lebih tua hanya akan melayani anda menurunkan resolusi gambar. Saya don't mengharapkan IE10 - muncul pada retina / high-res perangkat. Juga, menggunakan CSS cek di JavaScript tidak lebih aneh daripada menggunakan native jendela properti?

Heck, devicePixelRatio browser mendukung bahkan lebih baik daripada resolusi spec. (Lihat: http://caniuse.com/#feat=css-media-resolution)

I'd katakan's benar-benar sangat aman untuk digunakan, kita gunakan dalam produksi situs web dengan lebih dari 10 juta pengunjung per bulan. Bekerja seperti yang diharapkan.

Satu-satunya hal yang saya'd perubahan adalah nama fungsi, seperti kebutuhan untuk beban tinggi res images doesn't secara teknis berarti layar retina. Sebenarnya, anda don't bahkan membutuhkan nomor cek, seperti tidak terdefinisi > 1 menghasilkan false.

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

devicePixelRatio tidak dapat diandalkan sama sekali. ketika anda zoom in sampai 200%, jendela.devicePixelRatio akan kembali anda 2, tapi anda tidak berada pada retina display.