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


105

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é.

Réponses:


98

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
});

1
btw, vous aviez raison après tout ... lors du dépannage, j'ai remarqué qu'il y avait des barres de défilement. ils sont apparus si brièvement qu'ils ne pouvaient être vus qu'en mode débogage avec le script en pause au milieu de l'exécution. une fois que j'ai supprimé les variables et la fonction ci-dessus, certains éléments sautaient toujours de leur position - cela avait à voir avec l'ordre des actions de script - je devais juste m'assurer de réinitialiser le div en maintenant mes images insérées en css à gauche: 0 avant d'insérer l'image . morale de l'histoire: ce n'est pas parce que les barres de défilement n'apparaissent pas assez longtemps pour être vues qu'elles n'étaient pas là!
Manca Weeks du

J'utiliserais également cette question: stackoverflow.com/questions/2854407/… afin que vous puissiez vérifier une fois l'événement de redimensionnement terminé avant de faire quoi que ce soit. Votre script exécutera ce qui se trouve dans la fonction .resize () à chaque pixel que vous redimensionnez, il vaut donc mieux attendre.
MarkP

9

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.


3

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).


1

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.


En fait, mon problème initial était que la façon dont mes éléments se positionnaient autour de la page faisait apparaître les barres de défilement pendant une fraction de seconde - assez pour que la mesure soit biaisée mais pas assez pour que l'œil l'attrape ... ceci une fois que j'ai mis des déclarations d'alerte entre mes instructions javascript pour diviser le code en états distincts. Je l'ai fait pour que les alertes rapportent les mesures à chaque étape de l'exécution du code. C'est à ce moment-là que j'ai remarqué que l'un des états faisait apparaître des barres de défilement - ce qui était l'état où la mesure avait été prise.
Manca Weeks

1
Je peux confirmer la même chose avec les barres de défilement. Je ferais une lecture de $ (window) .height () après avoir redimensionné le navigateur et il pourrait afficher quelque chose comme 500. Ensuite, je rafraîchirais (sans redimensionner le navigateur) et il afficherait quelque chose de plus grand comme 700. Dans mon cas, j'ai pu le réparer en faisant simplement overflow: hidden sur le corps, car je ne veux jamais que les barres de défilement s'allument. Une fois que j'ai fait cela, le rapport de hauteur était cohérent.
sbuck
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.