2012-05-13 14 views
16

Sto cercando di ottenere la corrente altezza del browser finestra, utilizzando

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

Ma sto ottenendo valori che sono troppo bassi. Quando il viewport è alto circa 850px, ottengo valori intorno a 350 o 400px da height(). Che cosa succede?

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

+3

Per chiarire - stanno producendo questi errori _in jsFiddle_ o in un normale contesto del browser? jsFiddle usa un iFrame, quindi la finestra non sarà l'intera finestra, solo il frame più piccolo. – nrabinowitz

+0

in un normale browser, non in un iframe. – mix

+0

Avrai bisogno di un esempio non-jsFiddle, quindi - jsFiddle ti darà sempre numeri negativi qui. – nrabinowitz

risposta

9

Una possibile ragione potrebbe essere che si sta controllando la console con Firebug/qualcos'altro. In modo che non si ottiene l'altezza della finestra corretta a causa dell'altezza del firebug.

Si può provare qualcosa di simile:

prendere un arco/div in te documento:

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

e poi

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

Oppure, se si desidera controllare messo su Firebug console quindi staccarlo dal browser e quindi controllare il risultato.

+0

E questo è un consiglio molto, molto buono. Ho avuto questo problema in Chrome con la finestra dello sviluppatore aperta. –

2

Nessuna riproduzione. Tieni presente che l'altezza della finestra è diminuita dagli elementi nel chrome del browser, come la barra degli indirizzi, gli strumenti di sviluppo, le barre degli strumenti dei segnalibri e altro. Apparirà quanto segue per mostrare una rappresentazione accurata dell'altezza del viewport:

jsbin fornirà una stima piuttosto buona dell'altezza della finestra, in quanto non limita l'output del codice a un iframe di piccole dimensioni come altri siti di test di js come come 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

C'è qualche ragione per cui jsbin non funziona in IE9? Tuttavia ha funzionato bene in Firefox. – Hoque

+0

@Hoque Remy Sharp, il creatore di JSBin, lo ha testato ampiamente nelle versioni successive di IE. Se hai problemi con il fatto che puoi dettagliare in dettaglio, ti preghiamo di informarlo su twitter: [@rem] (https://twitter.com/#!/rem). – Sampson

1

JSFiddle opere creando un che viene caricato in modo dinamico dopo il rendering del codice.

Il tuo JavaScript sta calcolando l'altezza della finestra, che risulta essere l'altezza dello , che è di circa 400 px di altezza per me.

Il tuo codice sta facendo quello che dovrebbe essere.

30

Avevo lo stesso problema in Firefox, quindi ho aggiunto <!DOCTYPE HTML> all'indice e ha funzionato.

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

+8

Lei signore ha appena salvato la mia giornata: D! – Kaz

+0

Questo è anche il caso in cui il doctype è stato dichiarato più avanti nel documento, quando abbiamo aggiunto token meta CSRF alle nostre pagine e $ (window) .height() ha restituito un valore errato che è stato inserito prima della dichiarazione doctype . –

+0

Oh uomo .. Salvato qui anche la mia giornata! Tutto è stato .. Così radicalmente diverso quando ho spinto al mio allestimento scenico, ero davvero preoccupato. –

2

Per chi ha ancora problema dopo le soluzioni di cui sopra ...

Si prega di verificare il rapporto vista del browser sul vostro project.html ..

Il valore di $ (window) .height() non è uguale ai pixel "reali" dell'area client quando il rapporto di visualizzazione viene regolato! (e in modo che altri $ (xx) .width (...) in questa situazione)

(Il browser ricordavano il mio incauto rapporto di 110% regolato giorni fa ...)

+0

guarda anche la risposta di ozzysong [link] (http://stackoverflow.com/a/23320757/233545) in un altro stesso problema –