jquery $(window).width() et $(window).hauteur() retournent des valeurs différentes lorsque la fenêtre d'affichage n'a pas été redimensionnée
Je suis en train d'écrire un site à l'aide de jquery à plusieurs reprises des appels $(window).width()
et $(window).height()
à la position et la taille des éléments basés sur la taille de la fenêtre.
En dépannage, j'ai découvert que je suis légèrement différente taille de la fenêtre des rapports dans les appels répétés au-dessus de fonctions jquery lorsque la fenêtre n'est pas redimensionné.
Demandais si il n'y a aucun cas spécial quelqu'un sait de quand cela se produit, ou si c'est juste la façon dont il est. La différence dans les tailles rapportées sont 20px ou moins, il semble. Cela se passe dans Safari 4.0.4, Firefox 3.6.2 et Chrome 5.0.342.7 bêta sur Mac OS X 10.6.2. Je n'ai pas tester d'autres navigateurs mais parce qu'il ne semble pas être spécifique au navigateur. J'étais aussi incapable de comprendre quelle est la différence dépend, si elle n'est pas la taille de la fenêtre, pourrait-il y avoir un autre facteur qui rend les résultats diffèrent-ils?
Toute réflexion serait appréciée.
mise à jour:
Ce n'est pas les valeurs de $(window).width()
et $(window).height()
qui sont en train de changer. C'est les valeurs des variables que j'utilise pour stocker les valeurs de la ci-dessus.
Il n'est pas de barres de défilement qui sont afecting les valeurs, pas de barres de défilement apparaissent lorsque les valeurs des variables de changement. Voici mon code pour stocker les valeurs de mes variables (dont je fais juste de sorte qu'ils sont plus courts).
(tout cela est dans $(document).ready()
)
//d'abord déclarer les variables pour être visible à otehr fonctions au sein de .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 alerte déclaration de sonder les variables ci-dessus à l'encontre des valeurs qu'ils sont censés avoir. Le $(item).param()
valeurs de rester cohérent, mais mon variables changent pour des raisons que je ne peux pas comprendre.
J'ai cherché des endroits où mon code pourraient être modifier la valeur des variables en question, par opposition à la récupération de leurs valeurs et ne peux pas trouver. Je peux poster tout le toutim quelque part, si c'est une possibilité.
Vous devez vous connecter pour publier un commentaire.
Je pense que ce que vous voyez est le masquage et l'affichage des barres de défilement. Voici une rapide démonstration montrant la modification de la largeur des.
En aparté: avez-vous besoin d'interroger en permanence? Vous pourriez être en mesure d'optimiser votre code à exécuter sur l'événement resize, comme ceci:
Essayez d'utiliser un
$(window).load
événementou
$(document).ready
parce que les valeurs initiales peuvent être instables en raison des changements qui se produisent lors de l'analyse ou au cours de la DOM de la charge.
Noter que si le problème est causé par apparaître les barres de défilement, de mettre
dans votre CSS pourrait être une solution facile (si vous n'avez pas besoin de la page pour faire défiler).
J'ai eu un problème très similaire. J'ai été faire incompatible hauteur() les valeurs quand j'ai actualisé ma page. (Ce n'était pas ma variable à l'origine du problème, il a été à la hauteur réelle de la valeur.)
J'ai remarqué que dans la tête de ma page, j'ai appelé mes scripts d'abord, puis mon fichier css. J'ai changé de sorte 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.
Espère que ça aide.