非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

CSSdevice-aspect-ratio メディア特性は、出力機器の幅対高さのアスペクト比を調べるために使用します。

構文

device-aspect-ratio 特性は、 <ratio> で指定します。これは範囲の特性であり、つまり接頭辞の付いた min-device-aspect-ratio 及び max-device-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}

仕様書

仕様書 状態 備考
Media Queries Level 4
device-aspect-ratio の定義
勧告候補 メディアクエリレベル4で非推奨になりました。
Media Queries
device-aspect-ratio の定義
勧告 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
device-aspect-ratio media feature
非推奨非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,