css - メディア クエリのトリガー ポイントに関するブラウザーの違い

Question

Chrome と他のすべてのブラウザー (IE9、Chrome、Opera) では、メディア クエリのブレークポイントが異なる方法でトリガーされることに気付きました。

説明のために次のスクリーンショットを参照してください (プレースホルダーの写真は無視してください)。まず、ブレークポイントがクロムに​​ある場所:

ここで、他のすべてのブラウザーでメディア クエリがトリガーされる場所を以下で見てみましょう。例として Firefox を使用しますが、IE9 や Opera も同様です。

違い：

1. Chrome では、メディア クエリのトリガー ポイントは 1190px です。他のすべてのブラウザーでは、トリガー ポイントは 1173px です。違いは17pxです。

2. 17pxはブラウザ自体の実際の幅との差でもあります。それはどういう意味ですか？Chrome と Firefox の両方で、メディア クエリがトリガーされる前後のポイントのスクリーンショットを撮りました。Photoshop では、両方のブラウザーで jpg 画像の幅を一定に保ちました。何らかの理由で、メディア クエリは、Chrome を除くすべてのブラウザーで 17px 早くトリガーされます。

実際のメディア クエリ CSS コード:

@media (min-width: 1190px) and (max-width: 1254px) {

    .visible-large {
        display: inherit !important;
    }

}


@media (max-width: 1189px) {

    .visible-large {
        display: none !important;
    }

}

私の質問:すべてのブラウザーで同じ時点でメディア クエリをトリガーする方法はありますか?

Answer 1

オーバーフロー幅をカウントするブラウザもあると思います。