Quali sono le migliori pratiche per rilevare il rapporto pixel/densità?

Question

Attualmente sto utilizzando JavaScript per il rilevamento di dispositivi mobili sul mio sito Web, questo mi consente quindi di offrire contenuti diversi per utenti mobili o desktop.

Attualmente uso window.devicePixelRatio e screen.width di capire se l'utente se su un dispositivo mobile o meno, così:

var isMobileScreenWidth = ((screen.width/window.devicePixelRatio) < 768) 

768px è il punto in cui definiamo cellulari o desktop così 767 e sotto è mobile e 768 e sopra è desktop.

Questo funziona perfettamente, ma ultimamente ho incontrato un problema con Firefox, quando Firefox è ingrandita e fuori cambia la window.devicePixelRatio, quindi:

zoom = 30%, window.devicePixelRatio = 0.3 
zoom = 100%, window.devicePixelRatio = 1.0 
zoom = 300%, window.devicePixelRatio = 3.0 

Questo ora mi provoca un problema, perché tutti gli utenti che avere il browser ingrandito su Firefox per ottenere la versione mobile del sito.

Mi chiedevo se qualcuno fosse a conoscenza di un modo diverso o migliore di ottenere la densità dei pixel che è separata dai browser desktop.

Io uso anche una piccola quantità di rilevamento di User Agent ma poiché è un lavoro enorme tenere il passo con la lista in costante cambiamento di agenti utente mobili non è possibile per me dipendere sia dalla risoluzione dello schermo che dall'utente agente allo stesso tempo.

Se qualcuno ha qualche idea su questo e può aiutare sarebbe fantastico.

UPDATE:

Ho appena incontrato questo:

window.screen.availWidth/document.documentElement.clientWidth 

Questo rapido po 'di matematica è suggerito in questo post:

window.devicePixelRatio does not work in IE 10 Mobile?

ho provato ed è funziona in Firefox e risolve il mio problema, ma sfortunatamente ora causa un problema in Chrome, quindi:

Chrome zoom = 100%, 
window.devicePixelRatio = 1.0, 
window.screen.availWidth/document.documentElement.clientWidth = 3.0 

Non riesco a trovare una soluzione solida che funzioni per tutto.

Answer 1

È necessario sfruttare il suggerimento del produttore tramite la funzione <meta name="viewport" content="width=device-width"/> o @-ms-viewport {width:device-width}. Espone fondamentalmente lo zoom predefinito che il produttore del dispositivo considera ottimale data la densità dei pixel dello schermo. Dopo averlo fatto, quando chiami window.innerWidth ti darà ciò a cui l'equazione originale era destinata, ma senza fare affidamento su una misurazione della densità dei pixel.

Evitare di fare affidamento su window.devicePixelRatio per qualsiasi cosa. Il suo significato e il valore che restituisce è attualmente in uno stato di flusso e qualsiasi cosa tu faccia ora basato su di esso molto probabilmente si romperà molto presto.

Nota: finestra Meta funziona solo su Android, iOS e Windows Phone 8. @ -ms-finestra funziona solo (correttamente) su Metro IE10 e può interferire con il corretto comportamento Meta finestra su Windows Phone 8.