5

現在、Web サイトのモバイル側をセットアップしています。モバイル用のカスタム CSS と Javascript が必要なので、CSS には を使用するルールが@media screen and (max-width: 500px) {あり、Javascript にはif ($(window).width() < 500.

ただし、ブラウザーのサイズを正確なピクセルに変更すると、モバイル CSS が使用され始め、console.log($(window).width());485 が表示されます。

これは正常な動作ですか、それとも何か間違ったことをしていますか?

アップデート：

これを使用すると、値は同期しているように見えますが、現時点では firefox でのみテストされています。

var scrollBarWidth = false;


function mobileRules() {

    if (!scrollBarWidth) {
        var widthWithScrollBars = $(window).width();
        $('body').css('overflow', 'hidden');
        var widthNoScrollBars = $(window).width();
        $('body').css('overflow', 'scroll');
        scrollBarWidth = widthNoScrollBars - widthWithScrollBars;
        console.log('Width: '+widthWithScrollBars+'. Without: '+widthNoScrollBars+'. Scroll: '+scrollBarWidth);
    }

    console.log($(window).width()+scrollBarWidth+' vs '+globals.mobile_width);

    if ($(window).width()+scrollBarWidth < globals.mobile_width) {
        console.log('Running mobile rules in jQuery');
    }
}
4

1 に答える 1

1

Firefox では、メディア クエリはスクロールバーの幅が画面幅の内側にあると見なします。

これにより、15px の広い画面幅が得られます。

Webkit ベースのブラウザーでは、そうではありません。

このようなことが起こる理由に興味がある場合は、この記事のこのコメントを引用します。

Webkit ブラウザー (仕様に従っていない) の問題は、ブラウザーがメディア クエリによって引き起こされる無限ループ状態に遭遇し、ブラウザーのクラッシュにつながる可能性があることです。

例: >500px オーバーフロー-y: スクロール、<500px オーバーフロー-y: 非表示。ブラウザのサイズを 505 ピクセルのウィンドウ幅に合わせます。スクロール バーは、メディア クエリで使用される幅から 15 ピクセルほど減算されるため、メディア クエリは < 500 にフリップしますが、< 500 に達するとすぐにスクロール バーが消え、メディア クエリは > 500 にフリップします。そして、再びスクロール バーが表示され、<500px で、スクロール バーなしでそのスタイルが得られるので、楽しみが始まります... ブラウザが最終的に停止するまで、すすぎと繰り返しを繰り返します。

ここで、メディア クエリの最大幅を計算するための JavaScript を記述します。ロードするとすぐに Chrome/Safari がクラッシュするページが作成されます。

私の推測では、仕様はこの状態を防ぐために書かれたものです。Firefox と Opera は仕様に従っています。仕様に同意しないのは彼らのせいではありません。

于 2013-11-08T09:34:39.127 に答える