2012-05-13 8 views
16

は私が

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

を使用して、現在のブラウザのビューポートの高さを取得しようとしている。しかし、私はあまりにも低い値を取得しています。ビューポートの高さが約850pxの場合、height()から350または400pxの値が得られます。どうしたの?

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

+3

(ブラウザが日前に調整私の不注意な110%の比率を...思い出した) - あなたはこれらを取得していますエラー_in jsFiddle_、または通常のブラウザコンテキストでは? jsFiddleはiFrameを使用しているため、ウインドウはウインドウ全体ではなく、より小さなフレームになります。 – nrabinowitz

+0

通常のブラウザで、iframeではありません。 – mix

+0

あなたはjsFiddle以外の例が必要です。そして、jsFiddleは常にあなたに悪い数字を与えます。 – nrabinowitz

答えて

9

一つの可能​​な理由は、あなたが他の放火魔/何かをコンソールをチェックしていることかもしれません。あなたは火の高さのために窓の高さが正しくならないように。

あなたはこのような何か試すことができます。

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

、その後

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

あなたがチェックアウトしたい場合、またはFirebugの上に置く:あなたに

はスパンを取る/ divが文書化コンソールから取り出し、結果を確認してください。

+0

これは非常に良いヒントです。私は開発者ウィンドウを開いているChromeでこの問題を抱えていました。 –

2

いいえrepro。ウィンドウの高さは、アドレスバー、開発者ツール、ブックマークツールバーなど、ブラウザのクロムの項目によって減少することに注意してください。以下は、ビューポートの高さの正確な表示を示しています:

jsbinは、あなたのコード出力を他のjsテストサイトのような小さなiframeに制限しないので、 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

IE9でjsbinが動作しない理由はありますか?しかし、それはFirefoxでうまくいった。 – Hoque

+0

@Hoque JSBinの作成者であるRemy Sharpは、IEのそれ以降のバージョンで幅広くテストしています。特に問題がある場合は、Twitterでお知らせください:[@rem](https://twitter.com/#!/rem) – Sampson

1

JSFiddleは、コードをレンダリングした後、動的にロードされるを作成することによって動作します。

あなたのJavaScriptは、ウィンドウの高さを計算しています(この数字は、の高さです)。これは、約400pxの高さです。

あなたのコードは何をすべきかを実行しています。

30

私はFirefoxで同じ問題を抱えていましたが、<!DOCTYPE HTML>をインデックスに追加していました。

出典:まだ上記の解決後に問題を抱えている人のためにhttp://viralpatel.net/blogs/jquery-window-height-incorrect/

+8

あなたは私の一日をちょうど救った:D! – Kaz

+0

これは、ドキュメントにdoctypeを後で宣言し、CSRFメタトークンをページに追加したときにポップアップし、$(window).height()がdoctype宣言の前に挿入された間違った値を返した場合にも当てはまります。 –

+0

ああ男。私の一日もここに保存!すべては..私が私のステージングのenvにプッシュすると根本的に違います、私は本当に心配していました。 –

2

...

あなたproject.htmlにブラウザの表示比率を確認してください。..

$の値(ウィンドウ).height()は、ビュー比率が調整されたときにクライアント領域の '実際の'ピクセルと同じではありません! (およびそのほか$(XX).width()...このような状況で)

明確にするために

+0

また別の同じ問題でozzysongの返信[リンク](http://stackoverflow.com/a/23320757/233545)を見てください –

関連する問題