Was sind Best Practices zur Erkennung des Pixelverhältnisses/der Pixeldichte?

Question

Ich verwende derzeit JavaScript für die Erkennung von mobilen Geräten auf meiner Website. Dadurch kann ich unterschiedliche Inhalte für mobile oder Desktop-Benutzer bereitstellen.

Derzeit verwende ich window.devicePixelRatio und screen.width zu arbeiten, wenn der Benutzer, wenn sie auf einem mobilen Gerät oder nicht, etwa so:

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

768px ist der Punkt, an dem wir mobile oder Desktop so 767 und unten definieren Mobile und 768 und höher ist Desktop.

Das funktioniert perfekt, aber ich habe auf ein Problem mit Firefox vor kurzem kommen, wenn Firefox in gezoomt wird und aus es ändert sich die window.devicePixelRatio, so:

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

Das bin ich jetzt ein Problem verursacht, da alle Benutzer denen Haben Sie ihren Browser auf Firefox gezoomt bekommen Sie die mobile Version der Seite.

Ich frage mich, ob jemand eine andere oder bessere Art und Weise wusste, die Pixeldichte zu erhalten, die von Desktop-Browsern getrennt ist.

Ich benutze auch eine kleine Menge von User Agent-Erkennung, aber weil es eine massive Aufgabe ist, mit der ständig wechselnden Liste von mobilen Benutzeragenten Schritt zu halten, ist es mir nicht möglich, sowohl von der Bildschirmauflösung als auch vom Benutzer abhängig zu sein Agent zur gleichen Zeit.

Wenn jemand irgendwelche Ideen dazu hat und helfen kann, wäre das toll.

UPDATE:

Ich habe gerade über diese kommen:

window.screen.availWidth/document.documentElement.clientWidth 

Dieses schnell bisschen Mathe in diesem Beitrag vorgeschlagen wird:

window.devicePixelRatio does not work in IE 10 Mobile?

Ich habe es und es getestet Arbeitet in Firefox, und löst mein Problem, aber leider verursacht nun ein Problem in Chrome, also:

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

Ich kann nicht scheinen, eine feste Lösung zu finden, die für alles funktioniert.

Answer 1

Sie sollten den Hinweis des Herstellers über die Funktion <meta name="viewport" content="width=device-width"/> oder @-ms-viewport {width:device-width} nutzen. Es stellt grundsätzlich den Standard-Zoom zur Verfügung, den der Gerätehersteller angesichts der Pixeldichte des Bildschirms für optimal hält. Nachdem Sie dies getan haben, erhalten Sie beim Aufruf window.innerWidth, was Sie für Ihre ursprüngliche Gleichung vorgesehen hatten, aber ohne auf eine Messung der Pixeldichte angewiesen zu sein.

Vermeiden Sie die Verwendung von window.devicePixelRatio für irgendetwas. Ihre Bedeutung und der Wert, den sie zurückgibt, befinden sich derzeit im Fluss und alles, was Sie im Moment machen, wird sehr wahrscheinlich bald zerbrechen.

Hinweis: Meta Ansichtsfenster funktioniert nur auf Android, iOS und Windows Phone 8. @ -ms-Ansichtsfenster funktioniert nur (richtig) auf IE10 Metro und kann mit der richtigen Meta-Ansichtsfenster Verhalten auf Windows Phone stören 8.