wake-up-neo.net

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

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

Bei der Fehlerbehebung habe ich festgestellt, dass bei wiederholten Aufrufen der obigen jquery-Funktionen leicht unterschiedliche Größenberichte für Ansichtsfenster angezeigt werden, wenn die Größe des Ansichtsfensters nicht geändert wird.

Ich frage mich, ob es einen speziellen Fall gibt, von dem jemand weiß, wann dies geschieht, oder ob dies einfach so ist. Die angegebenen Größenunterschiede betragen anscheinend 20px oder weniger. Es passiert 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 noch keine anderen Browser getestet, weil es nicht so aussieht Ich konnte auch nicht herausfinden, wovon der Unterschied abhängt. Wenn es nicht die Größe des Ansichtsfensters ist, kann es einen weiteren Faktor geben, der die Ergebnisse unterschiedlich macht?

Jede Einsicht wäre dankbar.


aktualisieren:

Es sind nicht die Werte von $(window).width() und $(window).height(), die sich ändern. Es sind die Werte der Variablen, mit denen ich die oben genannten Werte speichere.

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 gerade mache, damit sie kürzer sind).

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

// deklariere die Variablen anfangs so, dass sie für andere Funktionen in .ready() sichtbar sind

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 Alert-Anweisung 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 fraglichen Variablen ändert, anstatt nur die eingestellten Werte abzurufen und keine zu finden. Ich kann den ganzen Shebang irgendwo posten, wenn das eine Möglichkeit ist.

105
Manca Weeks

Ich denke, was Sie sehen, ist das Ein- und Ausblenden von Bildlaufleisten. Hier ist eine kurze Demo, die die Breitenänderung zeigt .

Nebenbei bemerkt: Müssen Sie ständig Umfragen durchführen? Möglicherweise können Sie Ihren Code so optimieren, dass er für das Größenänderungsereignis ausgeführt wird:

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

Versuchen Sie a

  • $(window).load event

oder

  • $(document).ready

    weil die Anfangswerte aufgrund von Änderungen, die während des Parsens oder während des DOM-Ladens auftreten, inkonstant sein können.

9
Albi Patozi

Beachten Sie Folgendes, wenn das Problem durch das Anzeigen von Bildlaufleisten verursacht wird: Putting

body {
  overflow: hidden;
}

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

3
xixixao

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

Mir ist aufgefallen, dass ich im Kopf meiner Seite zuerst meine Skripte und dann meine CSS-Datei aufgerufen habe. Ich habe gewechselt, so dass die CSS-Datei zuerst verknüpft wird, dann die Skriptdateien und das scheint das Problem bis jetzt behoben zu haben.

Ich hoffe, das hilft.

1
Jared