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

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.

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
});

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.

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).

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.