3

Web サイトで作業しているときに、イライラする、しかし論理的な大きな問題に遭遇しました。

このフィドルを見てください。

重要な CSS :

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

div#wrapper {
    padding: 1em;
}

img {border: 4px solid blue;}

@media screen and (max-width: 480px) {
    img {border: 0 none;}
}

重要な jQuery :

function imgSize() {
    if ($(window).width() < 481) {
        $("img").css({
            "position": "relative",
                "width": $(window).width(),
                "max-width": "none",
                "left": "-1em",
                "float": "none"
        });
    } else {
        $("img").attr("style", "");
    }
}
imgSize();

$(window).resize(function() {
    imgSize();
});

結果ウィンドウを 481px より小さくしてから、もう一度大きくしてみてください。基本的な機能の説明: ウィンドウの幅が 481px より小さい場合、画像はその親よりも大きく、ウィンドウの幅に等しい幅に強制されます。これを CSS で行うことはできません。(できれば教えてください!) これにより、モバイル デバイスでの見栄えが良くなるはずです。画像をさらに「美しく」するために、画面が 0 ～ 480 ピクセルのときに元の境界線が削除されます。これはメディア クエリによって行われます。

野生のスクロールバーが表示されるまで、これはすべてうまく機能します。jQuery は「ウィンドウ」のみを考慮しますが、メディア クエリはスクロールバーの幅によって生成されるピクセルもカウントします。

実際、これは非常に論理的です。$(*window*).width()しかし、@media *screen*それは非常にイライラします。この問題に対処する最善の方法は何ですか? 「if scrollbar: x ピクセルを「if window width」関数に追加する」というカスタム関数を jQuery で記述します。ここで、xは特定のオペレーティング システムのスクロールバーの幅です。それとも、CSS を使用してこれを回避する必要がありますか、それとも jQuery と CSS を同じ意味で使用しないようにする必要がありますか?

私はこの問題だけに焦点を当てているのではなく、一般的な$(window).width()との違いに注目しています。media queries私の場合、実際にborder: 0 nonejQuery に追加することができました。それだけです。しかし残念ながら、それが常に可能であるとは限りません。できればプラグインを使わずに！

4

1 に答える 1

3

Enquire.jsでこれを修正できると思います。JS 関数を「メディア クエリの一致および不一致イベント」にバインドできます。

imgSize();このライブラリを使用すると、メディア クエリが有効になったときに起動できます。これにより、$(window).width()内部で jQuery を使用してチェックする必要がなくなりimgSize();ます。

プラグインを使用したくない場合は、次の方法で実行できます(コピーされたコード、テストされていません):

var mql = window.matchMedia("(min-width: 480px)");

mql.addListener(handleMediaChange);
handleMediaChange(mql);

var handleMediaChange = function (mediaQueryList) {
    if (mediaQueryList.matches) {
        // The browser window is at least 480px wide
    }
    else {
        // The browser window is less than 480px wide
    }
}

いずれにせよ、画面幅を取得する 2 つの異なる方法を揃えようとするのではなく、関数をメディア クエリの一致イベントにバインドすることをお勧めします。スクロールバーの幅がブラウザー間で同じではないことは確かなので、それを使用して計算することはクロスブラウザーのソリューションにはなりません。

于 2013-09-14T15:44:37.360 に答える