幅と幅に基づいたメディアクエリのFirefoxとウェブキットの測定

Question

FirefoxとWebkitブラウザは、最大幅のメディアクエリを使用すると、さまざまなことを測定するようです。レスポンシブルデザインのオーバーホールのためのブレークポイントを調べているうちに、Chromeは予想された幅でスタイルシートを含むことに気づきましたが、Firefoxはいつも予想より狭い幅でシートを含んでいました。たとえば：

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" media="screen and (max-width: 480px)" href="/480.css" /> 

広い1280から480個のピクセルにウィンドウのサイズを変更する際、私は原稿の幅を期待するには、480の原稿幅でスタイルシートを含めることをトリガーするだろうが、Firefoxがするまで、それが含まれていません幅は463ピクセルです。

いくつかのテストを実行したところ、Chromeではwindow.innerWidthに基づいているように見えますが、Firefoxではdocument.documentElement.clientWidthが使用されています。この情報は、window.matchMedia（ "（max-width：480px）"）のイベントリスナーの使用によって確認されます。 （Screen shot）。

私の質問は、私はこれに気付いた唯一の人ですか？私はこの動作に他の参照を見つけることができないので、多分私は何か間違っているのですか？

Answer 1

documentation for clientWidthによれば、それはDOCTYPEに関連する可能性があります。

clientWidthプロパティは、html要素にとって特別なことに注意してください。 は、どのdoctypeに対してもスクロールバーの垂直方向の表示なしで、ブラウザのクライアント領域の幅を返します。 doctypeが指定されていない場合、html要素のclientWidth プロパティには、 ブラウザに異なる値が含まれます。

もう1つlinkブラウザの幅に関するいくつかのブラウザ関連のケースで役に立ちました。

Answer 2

少し遅れているかもしれませんが、私は同じ問題に直面しています。しかし、ここでは「幅のメディア機能は、出力デバイスの目標と表示 領域の幅を説明456 Berea

からいくつかの洞察力です。連続メディアの場合、これは の幅で、レンダリングされたスクロールバー（存在する場合）のサイズは です（CSS2のセクション9.1.1 [CSS21]で説明されています）。

幅には垂直スクロールバーが含まれている必要があります。 Safariはそうではありません。おそらくWebKitの動作は、ブラウザとプラットフォーム間でスクロールバーの幅が正確に同じではないため、ある意味ではWeb開発者にとっては優れています。

いずれにしても、このブラウザの動作には一貫していません。多くの場合、大したことはありませんが、レイアウトの変更が発生したときのピクセル精度の制御が必要な場合は、迷惑になることがあります。