jquery $(окно).width() и $(окно).height () возвращает различные значения, если размер видового экрана не был изменен

Я пишу сайт с помощью 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())

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

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

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

4 100
jquery height resize viewport width

4 ответа:

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

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

$(window).resize(function() {
  //update stuff
});
93

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

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

или

  • $(document).ready

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

9

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

body {
  overflow: hidden;
}

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

3

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

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

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

1