Meta Viewport funktioniert richtig auf Android-Handy?

Question

Ich hatte alle möglichen Probleme mit Medienabfragen auf einem Desire HD, weil der Android-Browser die Seite automatisch mit einer höheren Auflösung rendert und verkleinert.Grundsätzlich glaubt es, dass es eine viel größere Bildschirmbreite hat als es.

Ich habe festgestellt, dass die Lösung darin besteht, die Skalierung mithilfe des Meta Viewport-Tags zu stoppen ...

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

Zunächst scheint dies funktioniert zu haben, da die richtige Medienabfrage ausgelöst wird.Das Telefon hat eine horizontale Auflösung von 480px und hat meine Medienabfrage (320px-480px) ausgelöst.

Ich habe dann etwas Javascript verwendet, um das berechnete Ansichtsfenster auf dem Bildschirm auszugeben ...

var windowWidth = $(window).width();
$('div.windowWidthLabel').text("Window Width: " + windowWidth + "px");

Die berechnete Größe betrug 369px, was ich sehr seltsam fand.Ich habe es dann mit einer Medienabfrage überprüft, bei der min und max auf 369px eingestellt waren, und es wurde ausgelöst (was zumindest übereinstimmt).Warum glaubt der Browser, dass es 369px ist, wenn die native Auflösung 480px beträgt?

Jede Hilfe wäre wirklich dankbar.

Jon

Answer 1

Ich habe keine genaue Antwort darauf gefunden, aber ich finde, es ist am besten, bei Medienabfragen sowieso nicht mit den genauen Ergebnissen von Geräten zu arbeiten. Passen Sie einfach Ihre Medienabfragen an, bis der Inhalt richtig aussieht :)