jquery $ (window) .width () и $ (window) .height () возвращают разные значения, если размер области просмотра не был изменен - PullRequest
Новая
       38

jquery $ (window) .width () и $ (window) .height () возвращают разные значения, если размер области просмотра не был изменен

105 голосов
/ 08 апреля 2010

Я пишу сайт, используя jquery, который неоднократно вызывает $(window).width() и $(window).height() для позиционирования и размера элементов в зависимости от размера области просмотра.

При поиске и устранении неисправностей я обнаружил, что при повторных вызовах вышеуказанных функций jquery я получаю слегка отличающиеся отчеты о размере области просмотра, когда область просмотра не изменяется.

Интересно, есть ли какой-нибудь особый случай, о котором кто-нибудь знает, когда это произойдет, или это так. Похоже, что разница в размере составляет 20px или меньше. Это происходит в Safari 4.0.4, Firefox 3.6.2 и Chrome 5.0.342.7 beta на Mac OS X 10.6.2. Я еще не тестировал другие браузеры, потому что он не является специфичным для браузера. Я также не смог выяснить, от чего зависит разница, если это не размер области просмотра, может ли быть другой фактор, который отличает результаты?

Любое понимание будет оценено.

Обновление:

Изменяются не значения $(window).width() и $(window).height(). Это значения переменных, которые я использую для хранения значений выше.

Это не полосы прокрутки, которые влияют на значения, полосы прокрутки не появляются при изменении значений переменных. Вот мой код для хранения значений в моих переменных (которые я делаю, чтобы они были короче).

(все это в пределах $(document).ready())

// первоначально объявляем переменные, которые будут видны другим функциям в .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()

Я вставил оператор оповещения, чтобы сравнить указанные выше значения со значениями, которые они должны хранить. $(item).param() значения остаются неизменными, но мои переменные меняются по причинам, которые я не могу понять.

Я искал места, где мой код мог изменять значение рассматриваемых переменных, а не просто извлекать их заданные значения и не мог найти ни одного. Я могу опубликовать весь Шебанг где-нибудь, если это возможно.

Ответы [ 4 ]

98 голосов
/ 08 апреля 2010

Я думаю, вы видите скрытие и показ полос прокрутки. Вот краткая демонстрация, показывающая изменение ширины .

В качестве отступления: вам нужно постоянно проводить опрос?Вы можете оптимизировать свой код для запуска в событии изменения размера, например так: 

$(window).resize(function() {
  //update stuff
});
9 голосов
/ 19 сентября 2012

Попробуйте использовать

  • $(window).load событие

или

  • $(document).ready

    потому что начальные значения могут быть непостоянными из-за изменений, которые происходят во время анализа или во время загрузки DOM.

3 голосов
/ 15 апреля 2013

Обратите внимание, что если проблема вызвана появлением полос прокрутки, введите 

body {
  overflow: hidden;
}

в вашем CSS может быть легко исправлено (если вам не нужна страница для прокрутки).

1 голос
/ 20 июля 2010

У меня была очень похожая проблема. Я получал противоречивые значения height (), когда обновлял свою страницу. (Это была не моя переменная, вызывающая проблему, а фактическое значение высоты.)

Я заметил, что в начале моей страницы я сначала вызывал свои скрипты, а затем файл css. Я переключился так, чтобы сначала связывался файл css, а затем файлы сценариев, и это, похоже, уже решило проблему.

Надеюсь, это поможет.

...