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 deralert
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?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Stellen Sie sicher, dass Ihre Messung ist fertig, wenn ganze Dokument geladen ist, und in der Größe verändert.
JS:
HTML:
Math.max
nurdocument.documentElement
.Kann ich bestätigen das Problem, zum Beispiel in Firefox 38.0.1 auf Android 4.1.2. Erstellt eine js bin für Testzwecke.
Ich würde gerne überprüfen Fenster.innerWidth für benutzerdefinierte DOM-Manipulationen auf verschiedene Auflösungen (Handy, tablet und desktop-Größe), so wäre es wichtig, um das richtige Fenster.innerWidth Wert, der bereits im Dokument.bereit ( - ) Staat-und nicht nur in die Fenster.load().
JS:
HTML:
(Ich wollte nur einen Kommentar und keine Antwort, aber keine Reputation noch zu tun 🙂
Das problem (innerWidth === 980) bleibt für Firefox 40.0 unter Android 4.4.4. 1 msec zu warten, ist eine Umgehung. Ersetzen
durch
In der Zwischenzeit habe ich auf dieses problem, während der Anpassung eine Recht aufwändige Website auf kleinen Bildschirmen. Firefox gehorcht der CSS folgenden "@media only screen and (max-width: 768px)". Allerdings, wenn man versucht, den Ereignishandler je nach Gerät-breiten, Firefox scheitert kläglich. Ich brauchte den oben genannten trick mit 0,5 Sekunden an allen stellen, wo ich abgeholt das Gerät Breite. Diese Wartezeit war notwendig für das Nexus 7 (2012), aber wer weiß, was benötigt wird, auch für andere Geräte?
Ich Stand vor dem gleichen Problem bei Verwendung
BrowserComponent
imCodeNameOne
- und Android -Meine Lösung Bestand darin, die js in einer Funktion wie so
Hören und zu den
onLoad
Veranstaltung derBrowserComponent
zur Ausführung dieses Skripts nachdem der browser vollständig geladen wurdeetwa so:
Umgang
window.onload
im html war nicht genug, um zu warten, für die entsprechende Breite, um bedient zu werdenNeben diese Lösung fand ich auch, dass
window.setTimeout(runScripts, 500);
arbeitet, um den richtigen Dokument Breite, an die Kosten zu verschwenden, um eine halbe SekundeDieser hat den job für mich, 1ms ist genug.