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

105

Я пишу сайт с использованием 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()значения остаются последовательными, но мои переменные изменяются по причинам , я не могу понять.

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

Недели Манки
источник

Ответы:

98

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

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

$(window).resize(function() {
  //update stuff
});
Ник Крейвер
источник
1
кстати, вы все-таки были правы ... во время устранения неполадок я заметил полосы прокрутки. они появлялись так ненадолго, что их нельзя было увидеть, кроме как в режиме отладки, когда скрипт был приостановлен в середине выполнения. как только я удалил указанные выше переменные и функцию, некоторые элементы все еще прыгали с позиции - это было связано с порядком шагов скрипта - мне просто нужно было убедиться, что я сбросил div, содержащий мои вставленные изображения, на css left: 0 перед вставкой изображения . Мораль истории: просто потому, что полосы прокрутки не кажутся достаточно длинными, чтобы их можно было увидеть, не означает, что их там не было!
Manca Weeks,
Я бы также использовал этот вопрос: stackoverflow.com/questions/2854407/…, чтобы вы могли проверить, как только событие изменения размера завершится, прежде чем что-либо делать. Ваш скрипт будет запускать все, что есть в функции .resize (), каждый пиксель, размер которого вы изменяете, поэтому лучше подождать.
MarkP
9

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

  • $(window).load мероприятие

или

  • $(document).ready

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

Альби Патози
источник
3

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

body {
  overflow: hidden;
}

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

xixixao
источник
1

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

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

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

Джаред
источник
На самом деле, моя первоначальная проблема заключалась в том, что то, как мои элементы позиционировали себя по странице, заставляло полосы прокрутки появляться на долю секунды - достаточно для искажения измерения, но недостаточно для того, чтобы глаз мог его уловить ... Я подумал это происходит, когда я помещаю операторы предупреждения между операторами javascript, чтобы разбить код на отдельные состояния. Я сделал это, чтобы оповещения сообщали об измерениях на каждом этапе выполнения кода. Именно тогда я заметил, что одно из состояний вызывает появление полос прокрутки - в этом состоянии было выполнено измерение.
Manca Weeks,
1
Я могу подтвердить то же самое с полосами прокрутки. Я бы прочитал $ (window) .height () после изменения размера браузера, и он мог бы показать что-то вроде 500. Затем я обновлял (без изменения размера браузера), и он отображал что-то большее, например 700. В моем случае, я смог исправить это, просто выполнив overflow: hidden в теле, потому что я не хочу, чтобы полосы прокрутки включались. Как только я это сделал, отчет о высоте стал последовательным.
sbuck