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


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

Attualmente io uso window.devicePixelRatio e screen.width per capire se l'utente se su un dispositivo mobile o meno, in questo modo:

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

768px è il punto in cui definiamo il mobile o il desktop in modo che 767 e inferiore siano mobili e 768 e superiori sia desktop.

Funziona perfettamente, ma recentemente ho riscontrato un problema con Firefox, quando Firefox viene ingrandito e rimpicciolito window.devicePixelRatio, così:

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

Questo ora mi crea un problema perché tutti gli utenti che hanno ingrandito il browser su Firefox ottengono la versione mobile del sito.

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

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

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

AGGIORNARE:

Ho appena trovato questo:

window.screen.availWidth / document.documentElement.clientWidth

Questo rapido frammento di matematica è suggerito in questo post:

window.devicePixelRatio non funziona in IE 10 Mobile?

L'ho provato e 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.


20
2018-05-14 11:11


origine


risposte:


Dovresti sfruttare il suggerimento del produttore tramite il <meta name="viewport" content="width=device-width"/> o @-ms-viewport {width:device-width} caratteristica. 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 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: Meta viewport funziona solo su Android, iOS e Windows Phone 8. @-ms-viewport funziona solo (correttamente) su IE10 Metro e può interferire con il corretto comportamento di Meta viewport su Windows Phone 8.


15
2017-07-03 22:52