jquery $ (ventana) .width () y $ (ventana) .height () devuelven valores diferentes cuando la ventana gráfica no ha sido redimensionada

105

Estoy escribiendo un sitio usando jquery que llama repetidamente $(window).width()y $(window).height()para posicionar y dimensionar elementos según el tamaño de la ventana gráfica.

En la resolución de problemas, descubrí que recibo informes de tamaño de ventana gráfica ligeramente diferentes en llamadas repetidas a las funciones jquery anteriores cuando no se cambia el tamaño de la ventana gráfica.

Me pregunto si hay algún caso especial del que alguien sepa cuándo sucede esto, o si es así. La diferencia en los tamaños informados es de 20 píxeles o menos, al parecer. Sucede en Safari 4.0.4, Firefox 3.6.2 y Chrome 5.0.342.7 beta en Mac OS X 10.6.2. No probé otros navegadores todavía porque no parece ser específico para el navegador. Tampoco pude averiguar de qué depende la diferencia, si no es el tamaño de la ventana gráfica, ¿podría haber otro factor que haga que los resultados sean diferentes?

Cualquier idea sería apreciada.


actualizar:

No son los valores de $(window).width()y los $(window).height()que están cambiando. Son los valores de las variables que estoy usando para almacenar los valores de lo anterior.

No son las barras de desplazamiento las que afectan los valores, no aparecen barras de desplazamiento cuando cambian los valores de las variables. Aquí está mi código para almacenar los valores en mis variables (que estoy haciendo solo para que sean más cortos).

(todo esto está dentro $(document).ready())

// declara inicialmente que las variables sean visibles para otras funciones dentro de .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()

Inserté una declaración de alerta para probar las variables anteriores contra los valores que se supone que tienen. Los $(item).param()valores se mantienen consistentes, pero mis variables cambian por razones que no puedo entender.

He buscado lugares donde mi código podría estar alterando el valor de las variables en cuestión, en lugar de simplemente recuperar sus valores establecidos y no puedo encontrar ninguno. Puedo publicar todo el asunto en algún lugar si es posible.

Semanas de Manca
fuente

Respuestas:

98

Creo que lo que estás viendo es la ocultación y visualización de barras de desplazamiento. Aquí hay una demostración rápida que muestra el cambio de ancho .

Como comentario al margen: ¿necesita realizar encuestas constantemente? Es posible que pueda optimizar su código para que se ejecute en el evento de cambio de tamaño, como este:

$(window).resize(function() {
  //update stuff
});
Nick Craver
fuente
1
por cierto, tenías razón después de todo ... mientras solucionaba problemas, noté que había barras de desplazamiento. aparecieron tan brevemente que no se podían ver excepto en el modo de depuración con el script en pausa a mitad de la ejecución. una vez que eliminé las variables y la función anteriores, algunos elementos aún saltaban de la posición; tenía que ver con el orden de los pasos del guión; solo tenía que asegurarme de restablecer el div que mantiene mis imágenes insertadas en css left: 0 antes de insertar la imagen . moraleja de la historia: el hecho de que las barras de desplazamiento no aparezcan lo suficiente para ser vistas no significa que no estuvieran allí.
Manca Weeks
También usaría esta pregunta: stackoverflow.com/questions/2854407/… para que pueda verificar una vez que el evento de cambio de tamaño haya terminado antes de hacer nada. Su secuencia de comandos se ejecutará en la función .resize () cada píxel que cambie de tamaño, por lo que una mejor práctica es esperar.
MarkP
9

Trate de usar un

  • $(window).load evento

o

  • $(document).ready

    porque los valores iniciales pueden ser inconstantes debido a cambios que ocurren durante el análisis o durante la carga del DOM.

Albi Patozi
fuente
3

Tenga en cuenta que si el problema se debe a que aparecen barras de desplazamiento, coloque

body {
  overflow: hidden;
}

en su CSS podría ser una solución fácil (si no necesita que la página se desplace).

xixixao
fuente
1

Tenía un problema muy similar. Estaba obteniendo valores de altura () inconsistentes cuando actualicé mi página. (No fue mi variable la que causó el problema, fue el valor de altura real).

Noté que en el encabezado de mi página llamé primero a mis scripts, luego a mi archivo css. Cambié para que el archivo css esté vinculado primero, luego los archivos de script y eso parece haber solucionado el problema hasta ahora.

Espero que ayude.

Jared
fuente
En realidad, mi problema original era que la forma en que mis elementos se colocaban alrededor de la página hacía que aparecieran barras de desplazamiento durante una fracción de segundo, lo suficiente como para que la medida estuviera sesgada, pero no lo suficiente para que el ojo la captara ... esto una vez que puse declaraciones de alerta entre mis declaraciones de JavaScript para dividir el código en distintos estados. Hice eso para poder hacer que las alertas informaran las mediciones en cada etapa de la ejecución del código. Fue entonces cuando noté que uno de los estados hacía que aparecieran barras de desplazamiento, que resultó ser el estado en el que se tomó la medición.
Manca Weeks
1
Puedo confirmar lo mismo con las barras de desplazamiento. Haría una lectura de $ (window) .height () después de cambiar el tamaño del navegador y podría mostrar algo como 500. Luego actualizaría (sin cambiar el tamaño del navegador) y mostraría algo más grande como 700. En mi caso, pude solucionarlo simplemente haciendo overflow: hidden en el cuerpo, porque no quiero que las barras de desplazamiento se enciendan nunca. Una vez que hice eso, el informe de altura fue consistente.
sbuck