Wie finde ich den virtuellen viewport - /Bildschirm-Breite mit Javascript?

Gibt es eine konsistente Möglichkeit, um zu bestimmen, die Breite des screen-und virtual-viewport für mobile Geräte mit Javascript? Mein Ziel-Plattformen sind mobile Safari und den Android-stock-browser, aber ich bin auch Tests mit anderen Browsern auf Android.

Habe ich versucht, mit screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth und jQuery $(window).width().

Mobile Safari (ios 3.1.3(7E18), original iPod touch) zeigt sinnvolle Werte, aber die stock-Android-browser (Android 2.3.7) funktioniert nicht.

Ideal, ich denke, dass Bildschirm.Breite sollte zeigen, die tatsächliche pixel-Auflösung des Bildschirms: 320px auf dem iPod Touch und 480px auf dem Samsung Galaxy S2. Basierend auf was ich gelesen habe, eine der anderen zahlen, die zeigen, sollte die Breite des layout viewport werden sollte 980px auf dem iTouch und 800px auf dem Samsung Galaxy S2.
.

.

Code

<body>
<h1>screen.width: <span id="screen_width"></span></h1>
<h1>window.innerwidth: <span id="window_innerwidth"></span></h1>
<h1>clientWidth: <span id="clientwidth"></span></h1>
<h1>jQuery width: <span id="jquery_width"></span></h1>
</body>

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var swidth = screen.width;
        var wiwidth = window.innerWidth;
        var cwidth = document.getElementsByTagName("body")[0].clientWidth;
        var jwidth = $(window).width();
        document.getElementById("screen_width").innerHTML = swidth;
        document.getElementById("window_innerwidth").innerHTML = wiwidth;
        document.getElementById("clientwidth").innerHTML = cwidth;
        document.getElementById("jquery_width").innerHTML = jwidth;
    }
</script>

.

.

Ergebnisse

iOS-Safari:

Bildschirm.Breite: 320

Fenster.innerwidth: 980

clientWidth: 964

jQuery Breite: 980

Android-Browser:

Bildschirm.Breite: 800

Fenster.innerWidth: 800

clientWidth: 784

jQuery Breite: 800

Firefox Mobile (ein.k.ein. Fennec):

Bildschirm.Breite: 480

Fenster.innerwidth: 980

clientWidth: 964

jQuery Breite: 980

Den Safari-Ergebnisse sind sicherlich zu gebrauchen, aber nicht im Android-Browser die Ergebnisse.

Es ist ironisch, dass der Firefox mobile Ergebnisse genau sind. Obwohl es bietet eine schöne browsing-Erlebnis aus der Perspektive des Benutzers, es ist nicht eine ausreichend große Zielgruppe für mobile Geräte und es gibt viele andere Dinge, die nicht funktionieren gut auf diesen browser.

InformationsquelleAutor | 2011-12-30
  1. 3

    Ein weiterer StackOverflow-Frage hat dies als einen workaround:

    setTimeout(YourFunction, 200);

    Und wenn Sie wollen, dass die details, können Sie Lesen Sie mehr über den bug im issue-tracker. Sie erleben einen Fehler, der vorhanden ist in Android 2.2 und 2.3.

    InformationsquelleAutor Trott
  2. 3

    Es kann helfen, legen Sie die Skalierung der viewport zu 1.0 mit dieser <meta> - tag:

    <meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>

    Diese lösen ein ähnliches problem ist für mich, wenn wenn ich war das erstellen einer responsive HTML/CSS-layout für eine mobile-app (ich war mit CSS @media Abfragen).

    • Ich möchten, dass Benutzer in der Lage sein, zu skalieren oder zu verkleinern, so würde ich nicht wollen, zu minimalen oder maximalen Maßstab. Wenn ich ursprünglichen Maßstab wäre, würde das wahrscheinlich erlauben, eine Seite, die gut passen, auf dem mobilen browser. Ich werde Experimentieren und unterschiedliche Inhalte-block-breiten. Jetzt bin ich nur versuchen, herauszufinden, wie viel ich erzählen kann über einen mobilen browser ohne Rückgriff auf UA-sniffing.
    InformationsquelleAutor PPvG
  3. 1

    Finden Sie heraus, die verschiedenen viewport-breiten durch den Zugriff auf den folgenden link, auf dem Gerät

    http://ipad.atwebpages.com/viewport.html

    Dieser Arbeit für beide desktop-und mobilen Browsern..

    Nur hinzufügen, viewport ist vor allem nützlich für mobile Geräte nur...

    InformationsquelleAutor testndtv
Schreibe einen Kommentar