web-dev-qa-db-fra.com

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

J'écris un site à l'aide de jQuery qui appelle à plusieurs reprises $(window).width() et $(window).height() pour positionner et redimensionner des éléments en fonction de la taille de la fenêtre.

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

Vous vous demandez s'il y a des cas particuliers que quelqu'un sait quand cela se produit, ou si c'est juste ainsi. La différence dans les tailles rapportées est 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 sur Mac OS X 10.6.2. Je n'ai pas encore testé d'autres navigateurs car il ne semble pas être spécifique au navigateur. Je ne pouvais pas non plus comprendre la différence. Si ce n'était pas la taille de la fenêtre d'affichage, pourrait-il y avoir un autre facteur qui différencie les résultats?

Toute idée serait appréciée.

mise à 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 dans $(document).ready())

// déclare initialement que les variables sont 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 analyser les variables ci-dessus par rapport aux valeurs qu'elles sont supposées contenir. Les valeurs $(item).param() restent cohérentes, mais mes variables changent pour des raisons impossibles à comprendre.

J'ai cherché des endroits où mon code pourrait modifier la valeur des variables en question, par opposition à la simple récupération de leurs valeurs définies et ne pouvant en trouver aucune. Je peux poster le Shebang entier quelque part si c'est une possibilité.

jqueryresizeheightwidthviewport
105
Manca Weeks

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

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

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

Essayez d'utiliser un

  • $(window).load événement

ou

  • $(document).ready

    car les valeurs initiales peuvent être inconstantes en raison de modifications intervenues lors de l'analyse ou du chargement du DOM.

9
Albi Patozi

Notez que si le problème provient de l’affichage des barres de défilement, mettez

body {
  overflow: hidden;
}

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

3
xixixao

J'avais un problème très similaire. J'obtenais des valeurs de hauteur () incohérentes lorsque j'ai actualisé ma page. (Ce n'est pas ma variable qui cause le problème, c'était la valeur de la hauteur réelle.)

J'ai remarqué que dans l'en-tête de ma page, j'ai d'abord appelé mes scripts, puis mon fichier css. J'ai basculé de sorte que le fichier css soit lié en premier, puis les fichiers de script, ce qui semble avoir résolu le problème jusqu'à présent.

J'espère que ça t'as aidé.

1
Jared