jquery $ (Fenster) .width () und $ (Fenster) .height () geben unterschiedliche Werte zurück, wenn die Größe des Ansichtsfensters nicht geändert wurde

105

Ich schreibe eine Site mit jquery, die wiederholt aufruft $(window).width()und $(window).height()Elemente basierend auf der Größe des Ansichtsfensters positioniert und dimensioniert.

Bei der Fehlerbehebung habe ich festgestellt, dass ich bei wiederholten Aufrufen der oben genannten Abfragefunktionen leicht unterschiedliche Berichte zur Ansichtsfenstergröße erhalte, wenn die Größe des Ansichtsfensters nicht geändert wird.

Ich frage mich, ob es einen Sonderfall gibt, von dem jemand weiß, wann dies geschieht, oder ob dies einfach so ist. Der angegebene Größenunterschied beträgt anscheinend 20 Pixel oder weniger. Dies geschieht in Safari 4.0.4, Firefox 3.6.2 und Chrome 5.0.342.7 Beta unter Mac OS X 10.6.2. Ich habe andere Browser noch nicht getestet, da sie nicht spezifisch für den Browser zu sein scheinen. Ich konnte auch nicht herausfinden, wovon der Unterschied abhängt. Wenn es nicht die Größe des Ansichtsfensters ist, könnte es einen anderen Faktor geben, der die Ergebnisse unterscheidet?

Jeder Einblick wäre dankbar.


aktualisieren:

Es sind nicht die Werte von $(window).width()und $(window).height()die sich ändern. Es sind die Werte der Variablen, die ich zum Speichern der oben genannten Werte verwende.

Es sind keine Bildlaufleisten, die die Werte beeinflussen. Wenn sich die Variablenwerte ändern, werden keine Bildlaufleisten angezeigt. Hier ist mein Code zum Speichern der Werte in meinen Variablen (was ich nur mache, damit sie kürzer sind).

(das alles ist in $(document).ready())

// deklariere zunächst die Variablen als sichtbar für andere Funktionen innerhalb .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

Ich habe eine Warnmeldung eingefügt, um die obigen Variablen mit den Werten zu vergleichen, die sie enthalten sollen. Die $(item).param()Werte bleiben konsistent, aber meine Variablen ändern sich aus Gründen, die ich nicht herausfinden kann.

Ich habe nach Stellen gesucht, an denen mein Code möglicherweise den Wert der betreffenden Variablen ändert, anstatt nur die festgelegten Werte abzurufen, und kann keine finden. Ich kann den ganzen Schebang irgendwo posten, wenn das eine Möglichkeit ist.

Manca-Wochen
quelle

Antworten:

98

Ich denke, was Sie sehen, ist das Verstecken und Anzeigen von Bildlaufleisten. Hier ist eine kurze Demo, die die Änderung der Breite zeigt .

Nebenbei: Müssen Sie ständig abstimmen? Möglicherweise können Sie Ihren Code für die Ausführung des Größenänderungsereignisses wie folgt optimieren:

$(window).resize(function() {
  //update stuff
});
Nick Craver
quelle
1
Übrigens, Sie hatten doch Recht ... während der Fehlerbehebung bemerkte ich, dass es Bildlaufleisten gab. Sie wurden so kurz angezeigt, dass sie nur im Debug-Modus angezeigt werden konnten, wenn das Skript während der Ausführung angehalten wurde. Nachdem ich die obigen Variablen und Funktionen entfernt hatte, sprangen einige Elemente immer noch von der Position - dies hatte mit der Reihenfolge der Skriptschritte zu tun - ich musste nur sicherstellen, dass ich das Div, das meine eingefügten Bilder hält, auf CSS links: 0 zurücksetzte, bevor ich das Bild einfügte . Moral zur Geschichte: Nur weil Bildlaufleisten nicht lange genug erscheinen, um gesehen zu werden, heißt das nicht, dass sie nicht da waren!
Manca Weeks
Ich würde auch diese Frage verwenden: stackoverflow.com/questions/2854407/…, damit Sie überprüfen können, ob das Größenänderungsereignis abgeschlossen ist, bevor Sie etwas unternehmen. Ihr Skript führt jedes Pixel, dessen Größe Sie ändern, in der Funktion .resize () aus. Daher ist es besser, zu warten.
MarkP
9

Versuchen Sie, a zu verwenden

  • $(window).load Veranstaltung

oder

  • $(document).ready

    weil die Anfangswerte aufgrund von Änderungen, die während des Parsens oder während des DOM-Ladens auftreten, möglicherweise nicht konstant sind.

Albi Patozi
quelle
3

Beachten Sie, dass Putting, wenn das Problem durch angezeigte Bildlaufleisten verursacht wird

body {
  overflow: hidden;
}

in Ihrem CSS könnte eine einfache Lösung sein (wenn Sie die Seite nicht zum Scrollen benötigen).

xixixao
quelle
1

Ich hatte ein sehr ähnliches Problem. Beim Aktualisieren meiner Seite wurden inkonsistente height () -Werte angezeigt. (Es war nicht meine Variable, die das Problem verursachte, sondern der tatsächliche Höhenwert.)

Ich habe festgestellt, dass ich im Kopf meiner Seite zuerst meine Skripte und dann meine CSS-Datei aufgerufen habe. Ich habe so gewechselt, dass zuerst die CSS-Datei verlinkt wird, dann die Skriptdateien, und das scheint das Problem bisher behoben zu haben.

Hoffentlich hilft das.

Jared
quelle
Eigentlich war mein ursprüngliches Problem, dass die Art und Weise, wie sich meine Elemente auf der Seite positionierten, dazu führte, dass Bildlaufleisten für den Bruchteil einer Sekunde angezeigt wurden - genug, um die Messung zu verzerren, aber nicht genug, damit das Auge sie fängt ... dachte ich Dies wird behoben, sobald ich Alert-Anweisungen zwischen meine Javascript-Anweisungen eingefügt habe, um den Code in verschiedene Zustände zu unterteilen. Ich habe das getan, damit die Warnungen die Messungen in jeder Phase der Codeausführung melden können. In diesem Moment bemerkte ich, dass in einem der Zustände Bildlaufleisten angezeigt wurden. Dies war zufällig der Zustand, in dem die Messung durchgeführt wurde.
Manca Weeks
1
Ich kann dasselbe mit den Bildlaufleisten bestätigen. Ich würde $ (window) .height () nach dem Ändern der Größe des Browsers lesen und es könnte etwas wie 500 anzeigen. Dann würde ich aktualisieren (ohne die Größe des Browsers zu ändern) und es würde etwas Größeres wie 700 anzeigen. In meinem In diesem Fall konnte ich das Problem beheben, indem ich nur einen Überlauf durchführte: am Körper versteckt, weil ich nicht möchte, dass sich die Bildlaufleisten einschalten. Sobald ich das getan habe, war der Höhenbericht konsistent.
sbuck