106

ビューポートのサイズに基づいて要素を配置およびサイズ$(window).width()変更するために繰り返し呼び出す jquery を使用してサイトを作成しています。$(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()値は一貫していますが、変数は理由がわかりません。

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

4

4 に答える 4

98

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

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

$(window).resize(function() {
  //update stuff
});
于 2010-04-07T23:38:12.490 に答える
9

を使用してみてください

  • $(window).loadイベント

また

  • $(document).ready

    解析中または DOM ロード中に発生する変更により、初期値が一定でなくなる可能性があるためです。

于 2012-09-18T21:21:02.327 に答える
3

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

body {
  overflow: hidden;
}

あなたのCSSで簡単に修正できるかもしれません（ページをスクロールする必要がない場合）。

于 2013-04-15T18:05:04.410 に答える
1

私は非常によく似た問題を抱えていました。ページを更新すると、一貫性のない height() 値が得られました。(問題の原因は私の変数ではなく、実際の高さの値でした。)

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

それが役立つことを願っています。

于 2010-07-20T19:43:41.653 に答える