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

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

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

Интересно, есть ли какой-нибудь особый случай, когда кто-нибудь знает, когда это произойдет, или если это так, как есть. Разница в размерах составляет 20 пикселей или меньше, похоже. Это происходит в 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() остаются неизменными, но мои переменные меняются по причинам, которые я не могу понять.

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

или

  • $(document).ready

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

Ответ 3

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

body {
  overflow: hidden;
}

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

Ответ 4

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

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

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