0

ブラウザのウィンドウサイズの変化に応じてビューポートの幅と高さを動的に計算するこの関数があります。その値を画面に表示したいのですが、動作しません。何か案は？

JS：

<script type="text/javascript">
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();
             $('viewport').html(viewportWidth);
             $('viewport').html(viewportHeight);
        $(window).resize(function() {
             $('viewport').html(viewportWidth);
             $('viewport').html(viewportHeight);
        });
</script>

HTML：

<div id="viewport">width and height should be displayed here dynamically</div>

ありがとうございました

4

1 に答える 1

6

問題：

  • を使用し.htmlています。これは、要素の前のhtmlを上書きします。を使用できます.append。

  • ウィンドウのサイズが変更されたときに新しい値をフェッチするのではなく、最初に設定した変数のみを使用しています。

  • あなたが使用している"viewport"、それはする必要があります"#viewport"

  • また、コードの実行時に要素が存在することを確認する必要があります。つまり、dom readyハンドラーを使用するか、要素の後にスクリプト要素を配置します。

これを試して：

$(document).ready(function() {
    $(window).resize(function() {
        $('#viewport').empty().append($(window).width(), "x", $(window).height())
    }).resize(); //Initial call
});

デモ： http： //jsfiddle.net/3Lbb7/2/

于 2012-07-27T08:30:53.043 に答える