「max-width」または「max-device-width: レスポンシブ デザインにはどちらのメディア クエリを使用する必要がありますか?」

max-device-width または max-width を使用する必要がありますか?

TL;DR

レスポンシブ Web サイトの場合、ターゲットを指定するメディアクエリでは、min-device-width/max-device-width の代わりに min-width/max-width を使用することをお勧めします。

説明

デバイス幅メディア機能は、2018 Media Queries Level 4 仕様ドラフトで非推奨になりました。ブラウザのビューポートではなくデバイスの実際の画面サイズが考慮されるため、応答動作に不一致が生じる可能性があります。

max-width と max-device-width を使用する理由

• max-width はビューポート サイズをターゲットにし、デバイスとブラウザ ウィンドウ全体での応答性を確保します。サイズ。
• max-device-width はデバイスの物理的な画面サイズをターゲットにし、ブラウザ ウィンドウのサイズを変更するときの応答性を制限します。

追加の考慮事項

• ビューポート メタ タグを使用します () を使用してブラウザのビューポートのスケーリングを制御します。
• タッチ スクリーン エクスペリエンスを向上させるために、デバイス固有のメディア機能 (タッチ アクションなど) を検討してください。

さらに読み取り

• [Quirksmode.org - ピクセルはピクセルではない、ピクセルはピクセルではない](https://www.quirksmode.org/mobile/prefsizes.html)
• [W3 - メディア クエリ レベル 4仕様](https://www.w3.org/TR/mediaqueries-4/#device-width)
• [Google Developers - Web Fundamentals - Viewport](https://developers.google.com/ web/fundamentals/design-and-ui/sensitive-design/viewport)
• [Google Developers - Web Fundamentals - レスポンシブ CSS メディアクエリ](https://developers.google.com/web/fundamentals/design-and-ui/owned-design/css-media-queries)
• [MDN - ビューポート メタ タグを使用してレイアウトを制御するモバイルブラウザ上](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)

以上が「max-width」または「max-device-width: レスポンシブ デザインにはどちらのメディア クエリを使用する必要がありますか?」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。