0

私のCSSには、次のようなコードがあります。

html {
background:blue;
}
@media screen and (max-width: 980px)
html {
background:red;
}

したがって、ブラウザ ウィンドウが 980 ピクセル未満の場合、背景は赤になり、それ以外の場合は青になります。

ウィンドウのサイズを (CSS に従って) 970px に変更しましたが、背景は赤です。しかし、jquery を使用して を実行するalert($(window).width())と、1000px というポップアップが表示されました

$(window).width() が CSS の期待値よりも大きな値を報告するのはなぜですか?

4

3 に答える 3

0

ブラウザで何が起こっているかを正確に伝えるには、背景が十分ではありません。

すべてをテストするために、次のページを作成しました。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
    html { background:blue; }
    @media screen and (max-width: 980px) {
        html { background:red; }
    }
</style>
</head>
<body>test</body>
</html>

そして、インスペクタでテストした後$(window).width()、Chromium インスペクタの内部は、それがどうあるべきかを正確に示しています。

画面が赤い間、インスペクターで次のスタイルが設定されます。

margin-left: 8px;
margin-right: 8px;
width: 964px;

...そしてコンソールのjqueryは次のように表示します:

> $(window).width()
980

合計幅は、幅 + すべての余白です。つまり、964 + 8 + 8 = 980 です。

私の意見では、この不一致は、測定しているタグと親タグに設定された余白とおそらく境界によって引き起こされます。この動作の他の理由はわかりません。

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

于 2013-04-10T00:04:43.793 に答える
0

表示されるページとウィンドウのサイズには違いがあると思います。バニラJSでは、私が理解している限り：

window.innerWidth, window.innerHeight

(ページの表示幅/高さ)

window.outerWidth, window.outerHeight

(ブラウザ外幅/高さ)

これがおそらく理由だと思います。返される値は、ブラウザ ウィンドウの外側の幅です。ソース

于 2013-04-09T23:43:48.910 に答える