Falscher Wert für Fenster.innerWidth während ein onload-Ereignis in Firefox für Android?

Okay, also, das problem bin ich vor ist dieses: meine mobile Firefox-browser ist nicht auf das wiederherstellen der richtigen Werte für window.innerWidth, document.documentElement.clientWidth oder sogar die Breite eines div Stil zu nehmen, bis die gesamte client-Fenster nach dem laden der Seite.

Ich bin nicht verrückt, mein code funktioniert in jedem anderen browser! Für einige Grund, Firefox initialisiert diese Werte mit defaults und dann bekommt die richtigen Werte später auf. Wenn an irgendeinem Punkt unterbreche ich mein JavaScript mit einem alert() diese Eigenschaften magisch genau danach.

Habe ich das internet durchforstet nach einer Antwort, und alle, die ich finden kann ist ein hack Problemumgehung: verwenden Sie window.setTimeout zu verzögern, die Verwendung dieser Eigenschaften, bis Sie die Zeit zu füllen richtig. Das ist verrückt! Die Nutzer wollen Geschwindigkeit, nicht eine zusätzliche Verzögerung nur auf meiner Website auf einem Firefox-browser.

Was ich nicht verstehe ist, dass kann ich eine div bis zu füllen Sie das client-Fenster perfekt vor die Werte zu genau. Ich Tue dies in css die Einstellung der Breite und Höhe des div-id auf 100%. document.documentElement ist im Grunde das gleiche wie document.getElementById("my_div"); nachdem alle Dokument-Elemente geladen haben, also, wie funktioniert der browser weiß, wie groß die div sein sollten, wenn es nicht die richtigen Abmessungen des client-Fensters in den ersten Platz?

Habe ich versucht mit meinem code in einem window.addEventListener("load",function(event_){ //My Code }); aber immer noch diese Werte werden nicht generiert. Gibt es eine Seite, load-Ereignis kommt nach window.onload?

Wenn jemand mir sagen kann, warum nur Firefox mobile anzuzeigen scheint dieses sonderbare Verhalten werde ich Ihnen ein mentales high five.

Hier ist etwas Beispielcode zum nachstellen des Problems:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Added " after javascript during edit. -->
        <script type="text/javascript">
            window.addEventListener("load",function(event_){
                var output=document.getElementById("output");
                /* Returns some default value like 980. */
                output.innerHTML=window.innerWidth;

                alert("After this alert, the value will change.");
                /* Returns an accurate value like 511. */
                output.innerHTML=window.innerWidth;
            });
        </script>
        <!-- Added title during edit. -->
        <title>Title</title>
    </head>
    <body>
        <p id="output">Default Output</p>
    </body>
</html>

Mein Firefox für die android-version ist 35.0.1. Meine Android-version ist 4.4.4. Auf meinem Gerät, Firefox zeigt "980" in den Ausgangs-p-element, zeigt die Warnung, und zeigt dann "980" wieder. Nach Aktualisierung der Seite, die ersten beiden Schritte bleiben die gleichen, aber die Ausgabe nach der Vorwarnung 360. Dies geschieht mit document.documentElement.clientWidth als gut. Keine Eigenschaften, die ich versuche scheinen, um die richtigen Werte. Es scheint, dass Firefox irgendeine Art von Verzögerung nach dem laden der Seite, bevor es Zugriff auf das client-Fenster mit den Abmessungen...

Versuchte ich die verge.airve.com plugin ohne JQuery und dessen erstes feedback blieb 980. Es auch initialisiert 980 auf Chrome, das war seltsam, denn Chrome funktioniert wie erwartet, ohne dass es...

Nach viel Diskussion wurde eine Lösung gefunden!!! Firefox offenbar die Fenstergröße nach dem laden (ich Schätze für eine gute Maßnahme, die wirklich weiß)! So, indem Sie eine resize-Ereignisprozedur neben Fenster.onload, dieses problem verhindert werden können! Finden Sie akzeptierten Antworten unten für mehr details.

  • Sie können verwenden Sie die resize-Ereignis anstatt zu laden?
  • Ich verstehe browser-Kompatibilität kann frustrierend sein, aber könnten Sie denken, dass der eine mehr beschreibende Titel?
  • Sie sind nicht verrückt, Sie haven t arbeitete mit IE5 !
  • nicht repro-FF35.0.1 für android 4.4.4
  • Okay, ich bearbeitet den code ein wenig, es sollte funktionieren (oder nicht funktionieren) nun, wenn Sie nur kopieren und einfügen, die in eine html-Datei und führen Sie es. Ich Teste auf ein Moto G und meine android-version ist 4.4.4. Was ich hier zu sehen ist, bleibt der Wert in der Standard-vor und nach der alert genannt wird. Nach Aktualisierung der Seite initialisiert er bei 980 für die Standard-und nach der alert geht runter auf 360.
  • Ich habe versucht die "resize" - event-listener, aber es hat nicht Feuer, ohne eine Orientierung zu ändern. Meine Firefox-version 35.0.1. In Bezug auf mein Frage-Titel... Naja, ich dachte, eingängigen würde die Ergebnisse erhalten. \=) Nein, ernsthaft, dieses dilemma macht mich verrückt. Sicher noch andere Leute wissen, dass es einen workaround, der echt ist.
  • Verwenden Sie jQuery auf der Seite? nur geben Sie den code Antwort in $()
  • Ich nicht. Ich habe buchstäblich kopiert und eingefügt, den code in eine html-Datei und es lief, auf meinem Handy-browser. Ich möchte zu meiden JQuery für etwas so einfach wie immer client-Abmessungen, aber Sie können die Antworten werfen bei mir in JQuery. Es ist technisch immer noch Javascript, richtig? \=)
  • Hier ist ein Artikel über dieses Thema tripleodeon.com/2011/12/first-understand-your-screen
  • Ha Ha, oh Mann. Der Artikel ist im Grunde sagen will, es gibt keine standard-oder einen workaround. Ich würde grundsätzlich müssen eine andere Methode verwenden, die zur Unterstützung der einzelnen browser... Es auch zu dem Schluss in der Zusammenfassung, dass es manchmal eine Verzögerung, bevor die Eigenschaften zur Verfügung stehen, auch nach dem laden der Seite. Ich nehme an, dies bezieht sich auf mein problem mit Firefox... So eine bittersüße Erkenntnis. Der Artikel ist 4 Jahre alt, natürlich, und ich habe es gelesen, bevor. Ist es wirklich noch kein standard?

InformationsquelleAutor Frank | 2015-02-09
Schreibe einen Kommentar