jquery $ (fenêtre) .width () et $ (fenêtre) .height () renvoient des valeurs différentes viewport n'a pas été redimensionnée

Question

Je suis en train d'écrire un site en utilisant jquery qui appelle à plusieurs reprises $(window).width() et $(window).height() aux éléments de position et de la taille en fonction de la taille de la fenêtre.

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

Vous vous demandez s'il y a un cas particulier quelqu'un sait quand cela se produit, ou si cela est juste la façon dont il est. La différence de tailles rapportées sont 20px ou moins, il apparaît. Il arrive dans Safari 4.0.4, Firefox 3.6.2 beta et Chrome 5.0.342.7 sous Mac OS X 10.6.2. Je n'ai pas testé d'autres navigateurs encore parce qu'il ne semble pas être spécifique au navigateur. Je suis également incapable de comprendre ce que la différence dépend, si elle est pas la taille de la fenêtre, pourrait-il être un autre facteur qui rend les résultats diffèrent?

Toute idée serait appréciée.

---

Mise à jour:

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

Il n'est pas scrollbars qui afecting les valeurs, les barres de défilement apparaissent lorsque les valeurs variables changent. Voici mon code pour stocker les valeurs dans mes variables (ce que je fais tellement elles sont plus courtes).

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

// déclarer d'abord les variables à être visibles pour otehr 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é un rapport d'alerte pour sonder les variables ci-dessus par rapport aux valeurs qu'elles sont censées détenir. Les valeurs $(item).param() restent cohérentes, mais mes variables changent pour des raisons que je ne peux pas comprendre.

Je l'ai cherché des endroits où mon code pourrait être en train de modifier la valeur des variables en question, plutôt que de simplement récupérer leurs valeurs spécifiées et peuvent trouver aucune. Je peux poster tout le tralala quelque part, si c'est une possibilité.

Answer 1

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

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

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

Answer 2

Essayez d'utiliser un

• événement $(window).load

ou

• $(document).ready

  parce que les valeurs initiales peuvent être inconstante en raison des changements qui se produisent lors de l'analyse ou pendant la charge de DOM.

Answer 3

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

body {
  overflow: hidden;
}

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

Answer 4

J'avais un problème très similaire. Je recevais des valeurs hauteur incompatibles () quand je rafraîchi ma page. (Ce ne fut pas ma variable l'origine du problème, il a été la valeur de la hauteur réelle.)

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

L'espoir qui aide.