web-dev-qa-db-ja.com

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

任意の洞察力がいただければ幸いです。

更新：

変化しているのは$(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()

保持していると思われる値に対して上記の変数を検証するためにalertステートメントを挿入しました。 $(item).param()の値は一貫していますが、私が理解できない理由で変数が変わります。

私は自分のコードが問題の変数の値を変更している可能性がある場所を探しました。それが可能であれば、私はShebang全体をどこかに投稿することができます。

jqueryresizeheightwidthviewport
105
Manca Weeks

私が見ているのはスクロールバーの隠しと表示です。 これは幅の変更を示す簡単なデモです 。

余談として：あなたは常に世論調査をする必要がありますか？次のように、resizeイベントで実行するようにコードを最適化することができます。

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

を使用してみてください

  • $(window).loadイベント

または

  • $(document).ready

    構文解析中またはDOMロード中に発生した変更のため、初期値が不定になる可能性があるためです。

9
Albi Patozi

問題がスクロールバーの表示によるものである場合は、

body {
  overflow: hidden;
}

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

3
xixixao

私は非常によく似た問題を抱えていました。ページを更新したときに、height（）の値が矛盾していました。 （問題の原因は私の変数ではなく、実際の高さの値でした。）

私は自分のページの先頭に私が最初に私のスクリプトをそして私のcssファイルを呼んだことに気づいた。私はcssファイルが最初にリンクされるように切り替え、次にスクリプトファイルとそれが問題をこれまでに修正したようです。

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

1
Jared