jquery $ (window) .width () et $ (window) .height () renvoient 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.

Lors du dépannage, j'ai découvert que j'obtenais des rapports de taille de fenêtre légèrement différents lors d'appels répétés aux fonctions jquery ci-dessus lorsque la fenêtre n'était pas redimensionnée.

Vous vous demandez s'il y a un cas particulier que quelqu'un sait quand cela se produit, ou si c'est juste comme ça. La différence de taille rapportée est de 20 px ou moins, semble-t-il. Cela se produit 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 cela ne semble pas être spécifique au navigateur. Je n'ai pas non plus été en mesure de déterminer de quoi dépend la différence, si ce n'est pas la taille de la fenêtre d'affichage, pourrait-il y avoir un autre facteur qui rend les résultats différents?

Toute idée serait appréciée.

mettre à jour:

Ce ne sont pas les valeurs de $(window).width()et $(window).height()qui changent. Ce sont les valeurs des variables que j'utilise pour stocker les valeurs ci-dessus.

Ce ne sont pas les barres de défilement qui affectent 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 à l'intérieur $(document).ready())

// déclare initialement les variables visibles pour les autres fonctions 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 déclaration d'alerte pour sonder les variables ci-dessus par rapport aux valeurs qu'elles sont censées contenir. Les $(item).param()valeurs 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, au lieu de simplement récupérer leurs valeurs définies et je ne peux en trouver aucune. Je peux poster le shebang entier quelque part si c'est une possibilité.

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

En passant: avez-vous besoin de sonder constamment? Vous pourrez peut-être optimiser votre code pour qu'il s'exécute sur l'événement de redimensionnement, comme ceci:

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

Essayez d'utiliser un

• $(window).load un événement

ou

• $(document).ready

  car les valeurs initiales peuvent être inconstantes en raison des modifications qui se produisent pendant l'analyse ou pendant le chargement du DOM.

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

body {
  overflow: hidden;
}

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

J'avais un problème très similaire. J'obtenais des valeurs de height () incohérentes lorsque j'ai actualisé 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'appelais d'abord 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 cela pourra aider.