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.
Trate de usar un
$(window).loadeventoo
$(document).readyporque los valores iniciales pueden ser inconstantes debido a cambios que ocurren durante el análisis o durante la carga del DOM.
fuente
Tenga en cuenta que si el problema se debe a que aparecen barras de desplazamiento, coloque
en su CSS podría ser una solución fácil (si no necesita que la página se desplace).
fuente
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.
fuente