Estou escrevendo um site usando jquery que chama repetidamente $(window).width()e $(window).height()posiciona e dimensiona elementos com base no tamanho da janela de visualização.
Na solução de problemas, descobri que estou obtendo relatórios de tamanho de janela de visualização ligeiramente diferentes em chamadas repetidas para as funções jquery acima, quando a janela de visualização não é redimensionada.
Querendo saber se há algum caso especial que alguém conheça quando isso acontecer, ou se é assim que as coisas são. A diferença nos tamanhos relatados é de 20 px ou menos, ao que parece. Isso acontece no Safari 4.0.4, Firefox 3.6.2 e Chrome 5.0.342.7 beta no Mac OS X 10.6.2. Não testei outros navegadores ainda porque não parece ser específico para o navegador. Também não consegui descobrir de que depende a diferença. Se não for o tamanho da janela de visualização, poderia haver outro fator que diferencia os resultados?
Qualquer ideia seria apreciada.
atualizar:
Não são os valores de $(window).width()e $(window).height()que estão mudando. São os valores das variáveis que estou usando para armazenar os valores acima.
Não são as barras de rolagem que afetam os valores, nenhuma barra de rolagem aparece quando os valores das variáveis mudam. Aqui está meu código para armazenar os valores em minhas variáveis (o que estou fazendo apenas para que sejam mais curtos).
(tudo isso está dentro $(document).ready())
// declara inicialmente as variáveis como visíveis para outras funções dentro .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()Inseri uma instrução de alerta para testar as variáveis acima em relação aos valores que elas deveriam conter. Os $(item).param()valores permanecem consistentes, mas minhas variáveis mudam por motivos que não consigo descobrir.
Procurei lugares onde meu código pode estar alterando o valor das variáveis em questão, em vez de apenas recuperar seus valores definidos e não conseguir encontrar nenhum. Posso postar a coisa toda em algum lugar, se houver possibilidade.
Tente usar um
$(window).loadeventoou
$(document).readyporque os valores iniciais podem ser inconstantes devido às mudanças que ocorrem durante a análise ou durante o carregamento do DOM.
fonte
Observe que se o problema estiver sendo causado por barras de rolagem aparecendo, coloque
em seu CSS pode ser uma solução fácil (se você não precisar que a página role).
fonte
Eu estava tendo um problema muito semelhante. Eu estava obtendo valores de height () inconsistentes quando atualizei minha página. (Não foi minha variável que causou o problema, foi o valor real da altura.)
Percebi que no cabeçalho da minha página chamei meus scripts primeiro, depois meu arquivo css. Troquei para que o arquivo css seja vinculado primeiro, depois os arquivos de script e isso parece ter corrigido o problema até agora.
Espero que ajude.
fonte