jquery $ (window) .width() und $ (window) .height() geben verschiedene Werte zurück, wenn das Ansichtsfenster nicht in der Größe geändert wurde

Question

Ich schreibe eine Site mit jquery, die wiederholt $(window).width() und $(window).height() aufruft, um Elemente basierend auf zu positionieren und zu dimensionieren die Größe des Darstellungsbereichs

Bei der Fehlerbehebung habe ich festgestellt, dass ich bei wiederholten Aufrufen der obigen jquery-Funktionen geringfügig unterschiedliche Werte für Darstellungsfeldgrößen erhält, wenn das Darstellungsfenster nicht in der Größe geändert wird.

Ich frage mich, ob es irgendeinen besonderen Fall gibt, von dem irgendjemand weiß, wann das passiert, oder ob es genau so ist, wie es ist. Der Unterschied in den angegebenen Größen ist 20px oder weniger, so scheint es. Es passiert in Safari 4.0.4, Firefox 3.6.2 und Chrome 5.0.342.7 Beta auf Mac OS X 10.6.2. Ich habe andere Browser noch nicht getestet, da sie nicht spezifisch für den Browser sind. Ich konnte auch nicht herausfinden, woher der Unterschied kommt. Wenn es nicht die Größe des Darstellungsbereichs ist, könnte es einen anderen Faktor geben, der die Ergebnisse unterscheidet?

Jeder Einblick wäre willkommen.

---

Update:

Es ist nicht die Werte von $(window).width() und $(window).height() dass verändern. Es sind die Werte der Variablen, die ich verwende, um die obigen Werte zu speichern.

Es sind keine Bildlaufleisten, die die Werte beeinflussen, keine Bildlaufleisten werden angezeigt, wenn sich die Variablenwerte ändern. Hier ist mein Code, um die Werte in meinen Variablen zu speichern (was ich gerade mache, damit sie kürzer sind).

(all dies ist in $(document).ready())

// zunächst die Variablen deklarieren sichtbar sind Funktionen otehr 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 eine Benachrichtigung Anweisung eingefügt, um die oben genannten Variablen auf die Werte sondieren sie sollen halten. Die $(item).param() Werte bleiben konsistent, aber meine Variablen ändern sich aus Gründen, die ich nicht herausfinden kann.

Ich habe nach Orten gesucht, wo mein Code den Wert der betreffenden Variablen ändern könnte, anstatt nur ihre gesetzten Werte abzurufen und keine zu finden. Ich kann den ganzen Shebang irgendwo posten, wenn das eine Möglichkeit ist.

Answer 1

Ich denke, was Sie sehen, ist das Verbergen und Anzeigen von Bildlaufleisten. Here's a quick demo showing the width change.

Nebenbei: müssen Sie ständig abfragen? Möglicherweise können Sie Ihren Code so optimieren, dass er mit dem Größenanpassungsereignis wie folgt ausgeführt wird:

$(window).resize(function() { 
    //update stuff 
}); 

Answer 2

Ich hatte ein sehr ähnliches Problem. Ich habe inkonsistente height() -Werte erhalten, als ich meine Seite aktualisiert habe. (Es war nicht meine Variable verursacht das Problem, es war der tatsächliche Höhe Wert.)

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

Hoffe, dass hilft.

Answer 3

Versuch verwenden, um ein

• $(window).load Ereignis

oder

• $(document).ready

  weil die Anfangswerte aufgrund von Änderungen inkonstant sein können, die bei der Analyse auftreten oder während das DOM laden.

Answer 4

Beachten Sie, dass, wenn das Problem durch erscheinende Bildlaufleisten hervorgerufen wird,

body { 
    overflow: hidden; 
} 

in Ihrem CSS setzen könnte eine einfache Lösung sein (wenn Sie nicht über die Seite müssen scrollen).