jquery $ (window) .width () e $ (window) .height () retornam valores diferentes quando a janela de visualização não foi redimensionada

105

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.

Manca Weeks
fonte

Respostas:

98

Acho que o que você está vendo é esconder e mostrar barras de rolagem. Aqui está uma demonstração rápida mostrando a mudança de largura .

À parte: você precisa fazer pesquisas constantemente? Você pode otimizar seu código para ser executado no evento de redimensionamento, como este:

$(window).resize(function() {
  //update stuff
});
Nick Craver
fonte
1
A propósito, você estava certo afinal ... ao solucionar problemas, percebi que havia barras de rolagem. eles apareceram tão rapidamente que não puderam ser vistos, exceto no modo de depuração com o script pausado no meio da execução. depois de remover as variáveis ​​e funções acima, alguns elementos ainda saltavam da posição - tinha a ver com a ordem das etapas do script - eu só tinha que ter certeza de redefinir o div que mantinha minhas imagens inseridas em css à esquerda: 0 antes de inserir a imagem . moral da história: só porque as barras de rolagem não aparecem por tempo suficiente para serem vistas, não significa que elas não estavam lá!
Manca Weeks
Eu também usaria esta pergunta: stackoverflow.com/questions/2854407/… para que você possa verificar quando o evento de redimensionamento terminar antes de fazer qualquer coisa. Seu script executará o que quer que esteja na função .resize () a cada pixel que você redimensionar, portanto, a prática recomendada é esperar.
MarkP de
9

Tente usar um

  • $(window).load evento

ou

  • $(document).ready

    porque os valores iniciais podem ser inconstantes devido às mudanças que ocorrem durante a análise ou durante o carregamento do DOM.

Albi Patozi
fonte
3

Observe que se o problema estiver sendo causado por barras de rolagem aparecendo, coloque

body {
  overflow: hidden;
}

em seu CSS pode ser uma solução fácil (se você não precisar que a página role).

xixixao
fonte
1

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.

Jared
fonte
Na verdade, meu problema original era que a maneira como meus elementos se posicionavam ao redor da página fazia com que as barras de rolagem aparecessem por uma fração de segundo - o suficiente para que a medição fosse distorcida, mas não o suficiente para o olho perceber ... Eu imaginei isso fora uma vez que coloquei instruções de alerta entre minhas instruções javascript para quebrar o código em estados distintos. Fiz isso para que os alertas relatassem as medições em cada estágio da execução do código. Foi quando percebi que um dos estados fazia aparecer barras de rolagem - que por acaso era o estado em que a medição foi feita.
Manca Weeks
1
Posso confirmar a mesma coisa com as barras de rolagem. Eu faria uma leitura de $ (window) .height () após redimensionar o navegador e poderia mostrar algo como 500. Em seguida, atualizaria (sem redimensionar o navegador) e mostraria algo maior como 700. No meu caso, consegui consertá-lo apenas fazendo overflow: hidden no corpo, porque não quero que as barras de rolagem sejam ativadas. Depois de fazer isso, o relatório de altura foi consistente.
sbuck