Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
メディアクエリ Limited support

Device media queries

出力デバイスの物理画面サイズやアスペクト比に基づいてスタイルを適用するメディアクエリです。ただし、これらはビューポートではなくデバイス全体を対象とするため、実用性に限界があります。現在はwidth/heightメディアクエリの使用が推奨されています。

デバイスクエリ非推奨メディア特性

概要

出力デバイスの物理画面サイズやアスペクト比に基づいてスタイルを適用するメディアクエリです。ただし、これらはビューポートではなくデバイス全体を対象とするため、実用性に限界があります。現在はwidth/heightメディアクエリの使用が推奨されています。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 3+
Firefox 2+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
/* 非推奨 - width/heightを使用してください */
@media (device-width: 375px) {
  body { font-size: 14px; }
}
/* 推奨 */
@media (max-width: 375px) {
  body { font-size: 14px; }
}

実務での使いどころ

  • レガシーコードのデバイス判定

    古いプロジェクトで使用されているdevice-widthクエリを理解し、width/heightベースのクエリへの移行計画を立てます。

注意点

  • これらのメディア特性は非推奨であり、ビューポートベースのwidth/heightクエリに置き換えることが強く推奨されます。

アクセシビリティ

  • デバイスサイズに基づくスタイルはズーム操作を考慮しないため、相対単位とビューポートクエリを使用してください。

参考リンク