8

ウィンドウの幅が決定される方法を理解しようとしてきましたが、CSS と jQuery で異なるかどうか疑問に思っていました。

たとえば、CSS メディア クエリがあるとします。

@media (max-width: 979px) {
  /*my css here*/
}

また、いくつかのjQuery：

if ($(window).width() < 979) {
  //my jQuery here
}

私は次のことを期待します: - ブラウザのサイズを変更して 980px に更新すると、上記の両方が無視されます - ブラウザのサイズを変更して 978px に更新すると、上記の両方がアクティブになります。

しかし、私が見つけたのは、jQuery と CSS は約 964px 以下になるまで機能しないということです。- ときどき (window.resize を有効にしている場合)、jQuery と CSS が別々の幅 (数ピクセル離れている) で起動します。

ここで何が起こっているのか、誰かが光を当てることができますか?

ところで、ウィンドウの幅は Firebug のレイアウト ビューアに基づいています。

4

4 に答える 4

8

この問題はスクロールバーの幅に関連しています: window.innerWidthCSS メディア クエリによって読み取られる正しい値が返されます。$(window).innerWidth()間違った値を返すことに注意してください。

クロスブラウザー ソリューションの場合、次のような関数を使用できます。

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var value = viewport().width;
于 2013-10-24T15:39:37.127 に答える