ビューポートのサイズが変更されていない場合、jquery $(window).width()と$(window).height()は異なる値を返します


105

私は繰り返し呼び出す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ベータで発生します。他のブラウザーはブラウザーに固有のものではないため、まだテストしていません。私はまた、違いが何に依存するかを理解することができませんでした。それがビューポートのサイズでない場合、結果を異なるものにする別の要因があるのでしょうか?

どんな洞察もいただければ幸いです。


更新:

これは、の値ではない$(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()値は、一貫性のあるとどまるが、私の変数は、私は理解できない理由のために変更します。

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

回答:


98

私が見ているのは、スクロールバーの非表示と表示だと思います。 幅の変更を示す簡単なデモを次に示します

余談ですが、常にポーリングする必要がありますか?次のように、サイズ変更イベントで実行するようにコードを最適化できる場合があります。

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

1
ところで、結局のところ、あなたは正しかったです...トラブルシューティング中に、スクロールバーがあることに気づきました。それらは非常に短時間に表示されたため、実行中にスクリプトが一時停止したデバッグモード以外では表示されませんでした。上記の変数と関数を削除しても、一部の要素はまだ位置からジャンプしました-スクリプトステップの順序に関係する必要がありました-画像を挿入する前に、挿入した画像を保持するdivをcss left:0にリセットする必要があります。話の教訓:スクロールバーが見られるほど長く表示されないからといって、スクロールバーがそこになかったというわけではありません。
マンカウィーク、

私はこの質問も使用します:stackoverflow.com/questions/2854407/…だから、サイズ変更イベントが終了したら、何かを行う前に確認できます。スクリプトは、サイズ変更するすべてのピクセルで.resize()関数にあるものを実行するため、待機することをお勧めします。
MarkP、2014年

9

使用してみてください

  • $(window).load 出来事

または

  • $(document).ready

    これは、解析中またはDOMの読み込み中に発生する変更のために、初期値が一定しない可能性があるためです。


3

スクロールバーの表示が原因で問題が発生している場合は、

body {
  overflow: hidden;
}

CSSで簡単に修正できる場合があります(ページをスクロールする必要がない場合)。


1

私は非常に似た問題を抱えていました。ページを更新したときに、一貫性のないheight()値を取得していました。(問題を引き起こしたのは私の変数ではなく、実際の高さの値でした。)

ページの先頭で最初にスクリプトを呼び出し、次にcssファイルを呼び出していることに気付きました。私は、CSSファイルが最初にリンクされ、次にスクリプトファイルがリンクされるように切り替えました。

お役に立てば幸いです。


実際、私の元の問題は、要素がページの周りに配置されている方法で、スクロールバーが1秒の間に表示されていたため、測定値が歪むのに十分だが、目を引くには不十分でした...これは、JavaScriptステートメントの間にアラートステートメントを挿入して、コードを個別の状態に分割した後です。コード実行のすべての段階でアラートに測定値を報告させるために、そうしました。そのとき、スクロールバーが表示された状態の1つに気づきました。これはたまたま測定が行われた状態です。
マンカウィーク、

1
スクロールバーでも同じことが確認できます。ブラウザのサイズを変更した後、$(window).height()の読み取りを実行すると、500のように表示される場合があります。次に、(ブラウザのサイズを変更せずに)更新すると、700のように大きく表示されます。ケースでは、スクロールバーをオンにしたくないので、本体でoverflow:hiddenを実行するだけで修正できました。私がそれをしたら、高さレポートは一貫していた。
2012年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.