Qual è il modo migliore per rilevare il supporto della retina su un dispositivo che utilizza JavaScript?

In questo momento sto usando questo:

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

Ma è la semplicità a spaventarmi. C’è un controllo più approfondito?

Secondo tutto ciò che ho letto di recente, i browser sembrano muoversi verso l’espressione della media query di resolution . Questo è invece di device-pixel-ratio che viene utilizzato nella risposta attualmente accettata. Il motivo per cui device-pixel-ratio dovrebbe essere usato solo come fallback è perché non è una query media standard.

Secondo w3.org:

C’era una volta, Webkit ha deciso che era necessaria una query multimediale per la risoluzione dello schermo. Ma piuttosto che usare la query media di risoluzione già standardizzata, hanno inventato -webkit-device-pixel-ratio.

Visualizza l’articolo completo

Risoluzione Media Documentazione di query

Dal momento che la resolution è standardizzata e quindi il futuro, usiamola per prima nel rilevamento di prove future. Anche perché non sono sicuro che tu voglia rilevare solo dispositivi dppx alti o solo dispositivi retina (solo Apple), ne ho aggiunto uno. Infine, come nota, il rilevamento di Apple è solo uno sniffing di user-agent, quindi non è ansible dipendere . Nota: per la funzione isRetina sto usando un dppx di 2 invece di 1.3 perché tutti i dispositivi retina apple hanno un 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); } 

Se lo vuoi per le immagini puoi usare retinajs o questo codice è una risposta comune per rilevarlo:

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

In realtà, il codice che stai usando nella tua domanda è completamente giusto se ti preoccupi solo dei browser moderni. (Vedi: http://caniuse.com/#feat=devicepixelratio )

Tutti i browser moderni lo hanno implementato e ai browser più vecchi verrebbero servite solo le immagini a bassa risoluzione. Non mi aspetto che IE10- venga visualizzato su un dispositivo retina / ad alta risoluzione. Inoltre, sta usando i CSS check in JavaScript non più strani di usare una proprietà della finestra nativa?

Diamine, il supporto del browser devicePixelRatio è persino migliore delle specifiche di risoluzione. (Vedi: http://caniuse.com/#feat=css-media-resolution )

Direi che è davvero molto sicuro da usare, lo usiamo nei siti di produzione con oltre 10 milioni di visitatori al mese. Funziona come previsto.

L’unica cosa che cambierei è il nome della funzione, poiché la necessità di caricare immagini ad alta risoluzione non significa tecnicamente che lo schermo sia retina. In realtà, non hai nemmeno bisogno di un controllo numerico, in quanto undefined > 1 risulta false .

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

devicePixelRatio non è affatto affidabile. quando ingrandisci il 200%, window.devicePixelRatio ti restituisce 2, ma non sei su un display retina.