Device media queries
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
メモ: ビューポートのアスペクト比を問い合わせる場合は、代わりに aspect-ratio メディア特性を使用してください。
device-aspect-ratio は CSS のメディア特性で、出力機器の幅対高さのアスペクト比を調べるために使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 2 | 3 | 18 | 1 | |
| CSS @ ルール | ||||||
device-height 非推奨 device-height は CSS のメディア特性で、出力機器の描画面の高さを調べるために使用することができます。 | 1 | 12 | 2 | 3 | 18 | 1 |
device-width 非推奨 device-width は CSS のメディア特性で、出力機器の描画面の幅を調べるために使用することができます。 | 1 | 12 | 2 | 3 | 18 | 1 |
基本構文
CSS
/* Deprecated - use width/height */
@media (device-width: 375px) {
body { font-size: 14px; }
}
/* Recommended */
@media (max-width: 375px) {
body { font-size: 14px; }
}ライブデモ
実務での使いどころ
-
レガシーコードのデバイス判定
古いプロジェクトで使用されているdevice-widthクエリを理解し、width/heightベースのクエリへの移行計画を立てます。
注意点
- これらのメディア特性は非推奨であり、ビューポートベースのwidth/heightクエリに置き換えることが強く推奨されます。
アクセシビリティ
- デバイスサイズに基づくスタイルはズーム操作を考慮しないため、相対単位とビューポートクエリを使用してください。