CSS Media Queries：デスクトップのデバイス幅

Question

CSS Media Queriesの使用に関する重要な質問があります。 iPadのデバイス幅と言ったように、私は常に768px（両方の向き）を返すと思います。 デスクトップブラウザでは、device-widthの値はどういう値ですか？ 「Media Query for Desktop」で返される「幅」とは異なりますか？

Answer 1

仕様はあなたが両方にアクセスすることができます：

https://developer.mozilla.org/en/CSS/Media_queries

デバイス幅：など、画面全体またはページを意味する出力デバイス（だけではなく、描画領域の幅を記述しますドキュメントウィンドウとして）。

width：幅のメディアフィーチャは、出力デバイスのレンダリングサーフェスの幅（ドキュメントウィンドウの幅、またはプリンタのページボックスの幅など）を表します。

したがって、device-widthはディスプレイハードウェアの幅です（電話機またはデスクトップモニタの場合）。明らかに、画面サイズがブラウザのビューポートサイズにほとんど影響しないということを考えると、デスクトップ環境ではそれほど有用ではありません。