J'ai remarqué que mes scripts ne définissaient pas les largeurs correctement, j'ai donc essayé l'extrait de code suivant:

var prev;
setInterval(function(){
    if($(window).width()!=prev)
        console.log(prev=$(window).width());
},1);

Cela a imprimé 2 valeurs différentes: 1464 et 1481. Étant donné qu'elles sont séparées de 17 pixels, je suis presque certain que cela est dû aux barres de défilement. La deuxième valeur est la valeur correcte.

Pourquoi $(window).width() change-t-il sans redimensionner la fenêtre? Ne devrait-il pas renvoyer la largeur de la fenêtre du navigateur, qui devrait être constante?

17
Leo Jiang 16 juil. 2015 à 06:10

3 réponses

Meilleure réponse

$(window).width() est affecté par la marge, la bordure et le remplissage. Ceux-ci peuvent changer pendant le chargement du DOM. Comme mentionné ci-dessus, assurez-vous d'attendre jusqu'à $(document).ready() avant de commencer à regarder / tourner avec les objets DOM.

Plus d'informations ici http://api.jquery.com/width/

13
John Hascall 16 juil. 2015 à 03:28

Dans la plupart des cas, la largeur de la fenêtre change avec le contenu, donc il doit y avoir un appel ajax à venir qui modifie le contenu de la fenêtre. Vous pouvez utiliser l'outil de débogage du navigateur et ouvrir la fenêtre de trafic réseau pour voir ce qui arrive lorsque la largeur de la fenêtre change, déboguer dans le fichier javascript pour trouver quelle partie de la fenêtre change avec cet appel ajax, cela peut vous aider à trouver la raison.

1
sayume 16 juil. 2015 à 03:39

$(window).width() renvoie la largeur des window objets à l'exclusion des barres de défilement (autrement connu comme la largeur de la fenêtre d'affichage). Selon le système d'exploitation et le navigateur, la barre de défilement verticale peut souvent soustraire de la largeur de la fenêtre d'affichage. Cela signifie que vous devez appeler cette fonction une fois que tout votre contenu a été chargé, et vous devrez l'appeler à nouveau si le contenu change.

Mettre cela dans la fonction $.ready() ne garantit pas que vous obtiendrez la bonne largeur par rapport au contenu de la page finale. Cela est dû au fait que $.ready se déclenche lorsque le DOM est chargé, mais il peut encore y avoir des images / polices qui peuvent affecter la mise en page. Il est très possible qu'une barre de défilement puisse être ajoutée après que vous ayez appelé $.ready(). La solution la plus simple à ce problème consiste à placer votre appel dans la fonction $(window).load() à la place, car cela se déclenche lorsque tout le contenu a été chargé, et il n'y a plus rien à rendre.

De manière générale, c'est une bonne idée de définir la largeur sur DOM ready, le chargement de la fenêtre, le redimensionnement de la fenêtre et chaque fois que le contenu change. Cela peut être fait comme suit:

$(function() {
  var window_width;

  function set_window_width() {
    window_width = $(window).width();

    // do something with window_width
  }
  set_window_width(); // set width on DOM ready

  $(window).on('load resize', set_window_width); // set width on window load and resize

  function custom_load_content() {
    // load / change content

    set_window_width();
  }
});

La plupart (sinon la totalité) du temps, la largeur de la fenêtre d'affichage est celle que vous souhaitez. Vous utilisez probablement la largeur pour effectuer certains calculs et / ou redimensionner certains éléments, et cela devrait toujours être relatif à la fenêtre, car votre CSS est relatif à la fenêtre. Mais, si pour une raison quelconque vous souhaitez obtenir la largeur y compris les barres de défilement, vous pouvez utiliser window.innerWidth à la place (source).

17
Christian 16 juil. 2015 à 12:20