jquery $(window).width() et $(window).height() renvoie des valeurs différentes lorsque la fenêtre n'a pas été redimensionnée

J'écris un site en utilisant jquery qui appelle à plusieurs reprises $(window).width() et $(window).height() pour positionner et dimensionner les éléments en fonction de la taille de la fenêtre.

Dans le dépannage, j'ai découvert que je reçois des rapports de taille de fenêtre légèrement différents dans les appels répétés aux fonctions jQuery ci-dessus lorsque la fenêtre n'est pas redimensionnée.

Je me demande s'il y a un cas particulier que quelqu'un connaît quand cela se produit, ou si c'est juste comme ça. La différence dans les tailles signalées sont 20px ou moins, il apparaît. Cela arrive dans Safari 4.0.4, Firefox 3.6.2 et Chrome 5.0.342.7 beta sur Mac OS X 10.6.2. Je n'ai pas encore testé d'autres navigateurs car il ne semble pas être spécifique au navigateur. J'ai également été incapable de comprendre de quoi dépend la différence, si ce n'est pas la taille de la fenêtre, pourrait-il y avoir un autre facteur qui rend les résultats différents?

Toute idée serait appréciée.


Mise à jour:

Ce ne sont pas les valeurs de $(window).width() et $(window).height() qui changent. C'est l' valeurs des variables que j'utilise pour stocker les valeurs de ce qui précède.

Ce ne sont pas les barres de défilement qui afectent les valeurs, aucune barre de défilement n'apparaît lorsque les valeurs des variables changent. Voici mon code pour stocker les valeurs dans mes variables (ce que je fais juste pour qu'elles soient plus courtes).

(tout cela est dans $(document).ready())

/ / déclare initialement que les variables sont visibles pour les fonctions otehr dans .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()

J'ai inséré une instruction alert pour sonder les variables ci-dessus contre les valeurs qu'ils sont censés avoir. Les valeurs $(item).param() restent cohérentes, mais mes variables changent pour des raisons que je ne peux pas comprendre.

J'ai cherché des endroits où mon code pourrait modifier la valeur des variables en question, par opposition à simplement récupérer leurs valeurs définies et ne peut en trouver aucune. Je peux poster tout le shebang quelque part si c'est possible.

100
demandé sur Chad Ferguson 2010-04-08 03:29:55

4 réponses

Je pense que ce que vous voyez est la dissimulation et l'affichage des barres de défilement. Voici une démonstration rapide montrant le changement de largeur .

En aparté: avez-vous besoin d'interroger constamment? Vous pourriez être en mesure d'optimiser votre code à exécuter sur l'événement resize, comme ceci:

$(window).resize(function() {
  //update stuff
});
93
répondu Nick Craver 2010-04-07 23:38:12

Essayez d'utiliser un

  • $(window).load événement

Ou

  • $(document).ready

    Parce que les valeurs initiales peuvent être inconstantes en raison des changements qui se produisent pendant l'analyse ou pendant la charge DOM.

9
répondu Albi Patozi 2013-02-14 13:18:55

Notez que si le problème est causé par l'apparition de barres de défilement, mettre

body {
  overflow: hidden;
}

Dans votre CSS peut être une solution facile (si vous n'avez pas besoin de la page pour faire défiler).

3
répondu xixixao 2013-04-15 18:05:04

J'avais un problème très similaire. J'obtenais des valeurs height() incohérentes quand j'ai rafraîchi ma page. (Ce n'était pas ma variable qui causait le problème, c'était la valeur de hauteur réelle.)

J'ai remarqué que dans la tête de ma page j'ai d'abord appelé mes scripts, puis mon fichier css. J'ai changé pour que le fichier css soit lié en premier, puis les fichiers de script et cela semble avoir résolu le problème jusqu'à présent.

J'espère que ça aide.

1
répondu Jared 2010-07-20 19:43:41