css - *-device-width はいつ必要ですか?

Question

デスクトップおよびモバイル デバイス用のレスポンシブ Web アプリを作成しています。私の問題は、いつ使用する必要があるかわからないこと*-device-widthです。のユースケースについて説明してください*-device-width。の代わりに使用する必要があるのはなぜ*-widthですか?

Answer 1

ヘッドタグに追加するメタタグで使用します

<meta name="viewport" content="width=device-width" />

Answer 2

CSSメディアクエリの幅とデバイス幅の違いから：

device-widthそれは...

出力デバイスの幅 (ドキュメント ウィンドウなどのレンダリング領域だけでなく、画面またはページ全体を意味します)。

ソース。

width... _

出力デバイスのレンダリング サーフェスの幅を記述します (ドキュメント ウィンドウの幅、またはプリンターのページ ボックスの幅など)。

ソース。