Почему во время загрузки страницы изменяется $(window).width()?

Я заметил, что мои скрипты неправильно устанавливали ширину, поэтому я попробовал следующий фрагмент:

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

Это напечатало 2 разных значения: 1464 и 1481. Поскольку они разделены на 17 пикселей, я почти уверен, что это вызвано полосами прокрутки. Второе значение - правильное значение.

Почему $(window).width() изменяется без изменения размера окна? Должна ли она возвращать ширину окна браузера, которая должна быть постоянной?

Ответы

Ответ 1

$(window).width() зависит от поля, границы и отступов. Они могут меняться при загрузке DOM. Как упоминалось выше, убедитесь, что вы ждёте до $(document).ready(), прежде чем начинать просмотр/спрятать объекты DOM.

Подробнее здесь http://api.jquery.com/width/

Ответ 2

$(window).width() возвращает ширину объекта window, исключая полосы прокрутки (иначе известную как ширина окна просмотра). В зависимости от операционной системы и браузера вертикальная полоса прокрутки часто вычитается из ширины окна просмотра. Это означает, что вы должны вызывать эту функцию после загрузки всего вашего содержимого, и вам нужно будет позвонить ей снова, если содержимое изменится.

Помещение этого в функцию $.ready() не гарантирует, что вы получите правильную ширину относительно окончательного содержимого страницы. Это связано с тем, что при загрузке DOM срабатывает $.ready, но могут быть изображения/шрифты, которые могут повлиять на макет. Очень возможно, что полоса прокрутки может быть добавлена ​​после вызова $.ready(). Самое простое решение этой проблемы состоит в том, чтобы поместить ваш вызов внутри функции $(window).load(), поскольку это срабатывает, когда загружается весь контент, и больше ничего не отображать.

Вообще говоря, неплохо установить ширину в DOM, загружать окна, изменять размер окна и в любое время, когда содержимое изменяется. Это можно сделать так:

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

В большинстве (если не все) времени ширина видового экрана - это то, что вы хотите. Вероятно, вы используете ширину для выполнения некоторых вычислений и/или изменения размера некоторых элементов, и это всегда должно относиться к окну просмотра, потому что ваш CSS относится к окну просмотра. Но, если по какой-то причине вы хотите получить ширину, включая полосы прокрутки, вы можете вместо этого использовать window.innerWidth (источник).

Ответ 3

В большинстве случаев ширина окна изменяется с содержимым, поэтому должен появиться какой-то аякс-вызов, который изменяет некоторое содержимое окна. Вы можете использовать инструмент отладки браузера и открыть окно сетевого трафика, чтобы узнать, что произойдет, когда изменяется ширина окна, отлаживается в файле javascript, чтобы найти, какая часть окна изменяется с помощью этого ajax-вызова, это может помочь вам найти причину.