25

を使用して、現在のブラウザのビューポートの高さを取得しようとしています

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

しかし、私はあまりにも低い値を取得しています。ビューポートの高さが約 850px の場合、height() から約 350 または 400px の値を取得しています。調子はどう？

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

4

6 に答える 6

12

考えられる理由の 1 つは、firebug/ などでコンソールをチェックしている可能性があります。ファイアバグの高さのためにウィンドウの高さが正しくないようにします。

次のようなことを試すことができます：

ドキュメントでスパン/ divを取得します。

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

その後

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

または、firebug コンソールに置かれたものをチェックアウトする場合は、ブラウザーから切り離して結果を確認します。

于 2012-05-13T04:32:17.017 に答える
5

上記の解決策を実行しても問題が解決しない場合は...

project.html に対するブラウザの表示比率を確認してください。

$(window).height() の値は、ビューの比率が調整されたときのクライアント領域の「実際の」ピクセルと同じではありません! (その他の $(xx).width() ... この状況では)

(ブラウザは、数日前に調整した不注意な 110% 比率を記憶していました...)

于 2015-12-24T07:19:40.287 に答える
3

再現性なし。ウィンドウの高さは、アドレス バー、開発者ツール、ブックマーク ツールバーなど、ブラウザーのクロムのアイテムによって縮小されることに注意してください。以下は、ビューポートの高さの正確な表現を示しているようです。

jsbin は、jsfiddle などの他の js テスト サイトのようにコード出力を小さな iframe に制限しないため、ウィンドウの高さをかなり正確に推定できます。

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>
于 2012-05-13T04:38:31.367 に答える
2

JSFiddle<iframe>は、コードのレンダリング後に動的にロードされる を作成することで機能します。

あなたの JavaScript はウィンドウの高さを計算し<iframe>ています。

あなたのコードは本来あるべきことをしています。

于 2012-05-13T04:38:47.950 に答える