2010-04-07 1 views
97

Я пишу сайт с использованием 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())

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

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

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

ответ

92

Я думаю, что вы видите, это скрытие и показ полос прокрутки. Here's a quick demo showing the width change.

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

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

Кстати, вы были в конце концов ... в то время как устранение неполадок я заметил, что там были полосы прокрутки. они оказались настолько короткими, что их нельзя было увидеть, кроме как в режиме отладки, когда сценарий приостановился в середине исполнения. как только я удалил вышеуказанные переменные и функцию, некоторые элементы все еще прыгали с позиции - это было связано с порядком шагов скрипта - мне просто нужно было убедиться, что я сбросил div, удерживая мои вставленные изображения, в css left: 0 перед вставкой изображения , моральный для истории: просто потому, что полосы прокрутки не выглядят достаточно долго, чтобы их можно было увидеть, это не значит, что их там не было! –

+0

Я также использовал бы этот вопрос: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed, чтобы вы могли проверить, как изменить размер событие закончилось, прежде чем что-либо делать. Ваш скрипт будет запускать то, что когда-либо было в функции .resize(), каждый пиксель, размер которого вы изменяете, поэтому лучше подождать. – MarkP

1

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

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

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

+0

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

+1

Я могу подтвердить то же самое с полосами прокрутки. Я бы сделал чтение $ (window) .height() после изменения размера браузера, и он может показать что-то вроде 500. Затем я обновляю (без изменения размера браузера), и он будет показывать что-то большее, чем 700. В моем я смог исправить это, просто сделав переполнение: скрытое на теле, потому что я никогда не хочу, чтобы полосы прокрутки включались. Как только я это сделал, отчет о высоте был последовательным. – Susan

9

Попытка использовать

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

или

  • $(document).ready

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

3

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

body { 
    overflow: hidden; 
} 

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

Смежные вопросы