jquery - saber - js tamaño de la ventana

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

Question

Estoy escribiendo un sitio usando jquery que llama repetidamente $(window).width() y $(window).height() para posicionar y dimensionar elementos en función del tamaño de la $(window).height() .

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

Preguntándose si hay algún caso especial que alguien sepa cuando esto sucede, o si es así. La diferencia en los tamaños informados es 20px o menos, según parece. Sucede en Safari 4.0.4, Firefox 3.6.2 y Chrome 5.0.342.7 beta en Mac OS X 10.6.2. Aún no he probado otros navegadores porque no parece ser específico del navegador. Tampoco pude determinar de qué depende la diferencia, si no es el tamaño de la ventana gráfica, ¿podría existir algún otro factor que haga que los resultados difieran?

Cualquier idea sería apreciada.

actualizar:

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

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

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

// inicialmente declara 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 sondear las variables anteriores en comparación con los valores que se supone deben contener. Los valores de $(item).param() son 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 shebang en algún lado si eso es una posibilidad.

Answer 1

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

Como comentario: ¿necesitas sondear constantemente? Es posible que pueda optimizar su código para que se ejecute en el evento de cambio de tamaño, así:

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

Answer 2

Estaba teniendo un problema muy similar. Obtuve valores inconsistentes de altura () cuando actualicé mi página. (No era mi variable la que causaba el problema, era el valor de altura real).

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

Espero que ayude.

Answer 3

Intenta usar un

• Evento $(window).load

o

• $(document).ready

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

Answer 4

Tenga en cuenta que si el problema es causado por la aparición de barras de desplazamiento, poner

body {
  overflow: hidden;
}

en su CSS puede ser una solución fácil (si no necesita la página para desplazarse).