2012-05-13 19 views
16

estoy tratando de obtener la altura actual del navegador ventana gráfica, utilizando

$(window).on('resize',function() { 
    console.log("new height is: "+$(window).height()); 
}); 

Pero me estoy valores que son demasiado bajos. Cuando la ventana gráfica tiene una altura de 850 px, obtengo valores de 350 o 400 px desde altura(). ¿Que pasa?

Ejemplo: http://jsfiddle.net/forgetcolor/SVqx9/

+3

Para aclarar - estás recibiendo estos errors _in jsFiddle_, o en un contexto de navegador normal? jsFiddle utiliza un iFrame, por lo que la ventana no será toda su ventana, solo el cuadro más pequeño. – nrabinowitz

+0

en un navegador normal, no en un iframe. – mix

+0

Necesitarás un ejemplo que no sea jsFiddle, entonces - jsFiddle siempre te dará malos números aquí. – nrabinowitz

Respuesta

9

Una posible razón puede ser que se está comprobando la consola con Firebug/otra cosa. Para que no se corrija la altura de la ventana debido a la altura del firebug.

Usted puede intentar algo como esto:

tomar un lapso/div en ti documento:

<span id="res"></span> 

y luego

$(window).on('resize',function() { 
    $('#res').html("new height is: "+$(window).height()); 
}); 

O si lo desea comprobar hacia fuera puesta en Firebug consola luego sepárela del navegador y luego verifique el resultado.

+0

Y este es un muy, muy buen consejo. He tenido este problema en Chrome con la ventana del desarrollador abierta. –

2

Sin repro. Tenga en cuenta que la altura de la ventana se ve disminuida por los elementos en el cromo del navegador, como la barra de direcciones, herramientas de desarrollador, barras de herramientas de marcadores y más. Lo siguiente muestra una representación precisa de la altura de la ventana gráfica:

jsbin le dará una muy buena estimación de la altura de la ventana, ya que no limita la salida del código a un pequeño iframe como otros sitios de prueba js tales como jsfiddle.

http://jsbin.com/otaqej/edit#javascript,html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script> 
    </head> 
    <body> 
    <div id="message">Height: 0</div> 
    <script> 
     $(window).on("resize", function(){ 
     $("#message").html("Height: " + $(window).height()); 
     }); 
    </script> 
    </body> 
</html> 
+0

¿Hay alguna razón detrás de que jsbin no funcione en IE9? Sin embargo, funcionó bien en Firefox. – Hoque

+0

@Hoque Remy Sharp, el creador de JSBin, lo ha probado extensamente en versiones posteriores de IE. Si tiene algún problema que pueda detallar específicamente, hágale saber en twitter: [@rem] (https://twitter.com/#!/rem). – Sampson

1

jsFiddle funciona creando un que se carga dinámicamente tras suministrar el código.

Su JavaScript está calculando la altura de la ventana, que es la altura de , que es de alrededor de 400 px de alto para mí.

Tu código está haciendo lo que debería.

30

Estaba teniendo el mismo problema en Firefox luego agregué <!DOCTYPE HTML> en mi índice y funcionó.

Fuente: http://viralpatel.net/blogs/jquery-window-height-incorrect/

+8

Usted señor acaba de salvar mi día: D! – Kaz

+0

Este es también el caso cuando ha declarado el doctype más adelante en el documento, apareció cuando añadimos los metakines de CSRF a nuestras páginas y $ (window) .height() devolvió un valor incorrecto que se insertó antes de la declaración doctype . –

+0

Oh hombre ... ¡Salvó mi día aquí también! Todo fue ... Tan radicalmente diferente cuando empujé a mi entorno de puesta en escena, estaba realmente preocupado. –

2

Para aquellos que todavía tiene problema después de soluciones anteriores ...

Por favor, compruebe la relación de vista del navegador en su project.html ..

El valor de $ (ventana) .height() no es lo mismo que los píxeles "reales" del área de cliente cuando se ajusta la relación de visualización. (y para que otros $ (xx) .Width (...) en esta situación)

(El navegador se acordaron de mi descuido relación de 110% ajustado hace días ...)

+0

también mira la respuesta de ozzysong [link] (http://stackoverflow.com/a/23320757/233545) en otro mismo problema –

Cuestiones relacionadas