jquery $ (window) .width () et $ (window) .height () renvoient des valeurs différentes lorsque viewport n’a pas été redimensionné

$(window).width() un site en utilisant jquery qui appelle à plusieurs resockets $(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 des rapports de taille de fenêtre d’affichage légèrement différents apparaissent lors d’appels répétés aux fonctions jquery ci-dessus lorsque la fenêtre d’affichage n’est pas redimensionnée.

Vous vous demandez s’il y a des cas particuliers que quelqu’un connaisse quand cela se produit, ou si c’est juste comme ça. La différence de taille signalée est de 20px ou moins, semble-t-il. Cela se produit dans Safari 4.0.4, Firefox 3.6.2 et Chrome 5.0.342.7 beta sous 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 réussi à déterminer la différence, si ce n’est la taille de la fenêtre d’affichage, pourrait-il y avoir un autre facteur qui fait que les résultats diffèrent?

Toute idée serait appréciée.


mettre à jour:

Ce ne sont pas les valeurs de $(window).width() et de $(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 ne s’affiche lorsque les valeurs des variables changent. Voici mon code pour stocker les valeurs dans mes variables (que je fais juste pour qu’elles soient plus courtes).

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

// déclare initialement les variables pour être visibles par les fonctions otehr dans .ready()

 var windowWidth = $(window).width(); //resortingeve current window width var windowHeight = $(window).height(); //resortingeve current window height var documentWidth = $(document).width(); //resortingeve current document width var documentHeight = $(document).height(); //resortingeve current document height var vScrollPosition = $(document).scrollTop(); //resortingeve the document scroll ToP position var hScrollPosition = $(document).scrollLeft(); //resortingeve the document scroll Left position function onm_window_parameters(){ //called on viewer reload, screen resize or scroll windowWidth = $(window).width(); //resortingeve current window width windowHeight = $(window).height(); //resortingeve current window height documentWidth = $(document).width(); //resortingeve current document width documentHeight = $(document).height(); //resortingeve current document height vScrollPosition = $(document).scrollTop(); //resortingeve the document scroll ToP position hScrollPosition = $(document).scrollLeft(); //resortingeve the document scroll Left position }; //end function onm_window_parameters() 

J’ai inséré une alerte pour sonder les variables ci-dessus par rapport aux valeurs qu’ils sont censés contenir. Les valeurs de $(item).param() restnt 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 de ne pas en trouver. Je peux afficher tout le shebang quelque part si c’est possible.

    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 pour exécuter l’événement de redimensionnement, comme ceci:

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

    Essayez d’utiliser un

    • $(window).load

    ou

    • $(document).ready

      car les valeurs initiales peuvent être inconstantes à cause des changements qui se produisent pendant l’parsing ou pendant le chargement du DOM.

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

     body { overflow: hidden; } 

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

    J’avais un problème très similaire. J’obtenais des valeurs de hauteur () incohérentes lorsque je rafraîchis ma page. (Ce n’était pas ma variable à l’origine du problème, c’était la valeur réelle de la hauteur.)

    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 cela pourra aider.