[解決済み] jquery $(window).width() と $(window).height() は、ビューポートがリサイズされていない場合、異なる値を返します。

質問

jqueryを使用して、繰り返し $(window).width() と $(window).height() で、ビューポートサイズに基づいた要素の位置や大きさを指定します。

トラブルシューティングで、ビューポートがリサイズされていないときに上記のjquery関数を繰り返し呼び出すと、わずかに異なるビューポートサイズのレポートが得られることを発見しました。

この現象が起こるとき、何か特別なケースがあるかどうか、またはこれが単なる方法であるかどうか、誰もが知っているかと思います。報告されたサイズの差は 20px 以下のようです。この現象は、Mac OS X 10.6.2 上の Safari 4.0.4, Firefox 3.6.2 および Chrome 5.0.342.7 beta で発生します。ブラウザに固有の現象ではないようなので、他のブラウザはまだテストしていません。また、この違いが何に依存するのか把握できませんでした。もしビューポート サイズでないのなら、結果を違える別の要因があるのでしょうか?

どんな洞察でもかまいません。

を更新しました。

の値ではなく $(window).width() と $(window).height() が変化していることです。上記の値を格納するために使用している変数の値です。

値が変化するのはスクロールバーではなく、変数の値が変化してもスクロールバーは表示されません。以下は、変数に値を格納するための私のコードです (これは、単に短くするために行っています)。

(これはすべて $(document).ready() )

の中の他の関数から見えるようにするために、 //最初に変数を宣言します。 .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

上記の変数が保持しているはずの値に対して、アラートステートメントを挿入して調べてみました。その $(item).param() の値は一貫していますが、私の変数は私が理解できない理由で変化しています。

私のコードが、設定された値を取得するのとは対照的に、問題の変数の値を変更しているかもしれない場所を探しましたが、何も見つけることができませんでした。それが可能であるなら、私はその全体をどこかに投稿することができます。

どのように解決するのですか?

表示されているのは、スクロールバーの非表示と表示だと思います。 幅の変更を示す簡単なデモを以下に示します。 .

余談ですが、常にポーリングする必要があるのでしょうか？ このように、resizeイベントで実行するようにコードを最適化することができるかもしれません。

$(window).resize(function() {
  //update stuff
});