CSS<resolution> データ型メディアクエリーresolutions で使われ、出力デバイスのピクセル密度である、解像度を表します。

画面では、長さは 物理的な値ではなく、CSS のインチ、センチメートル、またはピクセルと関連づけられます。

構文

<resolution> データ型は、厳密に正の <number> のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

単位

dpi
1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 0.39dpcm です。
dpcm
センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、1dpcm ≈ 2.54dpi です。
dppx
ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx96dpi と同じです。これは image-resolution で定義される、CSS の画像のデフォルトの解像度に一致します。
x
dppx の別名です。

注記: 仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi0dpcm0dppx のどれも表しません。

メディアクエリーで使用する

@media print and (min-resolution: 300dpi) { ... }

有効な解像度

96dpi
50.82dpcm
3dppx

無効な解像度

72 dpi     誤り: <number> と単位の間に空白を置いてはいけません
ten dpi    誤り: 数字以外を使ってはいけません
0          誤り: 0 値 の単位を省略できるのは <length> データ型 だけです。

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 4
<resolution> の定義
編集者草案 x 単位を追加
CSS Values and Units Module Level 3
<resolution> の定義
勧告候補 dppx 単位を追加
Media Queries
<resolution> の定義
勧告 初回定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 29Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 ありWebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
dppx unitsChrome 完全対応 29Edge 完全対応 12Firefox 完全対応 16IE 未対応 なしOpera 完全対応 12.1Safari 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 device-pixel-ratio を使用しています。
未対応 なし
補足
補足 See bug 16832.
WebView Android ? Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 16Opera Android 完全対応 12.1Safari iOS 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 device-pixel-ratio を使用しています。
未対応 なし
補足
補足 See bug 16832.
Samsung Internet Android ?
x unitsChrome ? Edge ? Firefox 完全対応 62IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 62Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

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

このページの貢献者: yyss, Sebastianz, Prinz_Rana, fscholz, sosleepy, ethertank, Marsf
最終更新者: yyss,