-webkit-device-pixel-ratio

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

-webkit-device-pixel-ratioCSS の標準外の論理メディア特性で、標準のresolutionメディア特性の代替です。

メモ: このメディア特性は WebKit の機能です。可能であれば、代わりに resolution メディア特性クエリーを使用してください。

構文

-webkit-device-pixel-ratio 特性は <number> 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた -webkit-min-device-pixel-ratio および -webkit-max-device-pixel-ratio の変化形を使用して、それぞれ最低値と最高値をクエリーすることもできます。

<number>

CSS の px を表すために使われるデバイスピクセルの数です。この値は <number> であり、構文的に単位を許可しておらず、暗黙の単位は dppx です。

実装

css
/* "dppx" の単位が含まれています。 */
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/* ... は以下のものと同じです。 */
@media (min-resolution: 2dppx) { ... }

/* 同様に */
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/* ... は以下のものと同じです。 */
@media (max-resolution: 2dppx) { ... }

HTML

html
<p>This is a test of your device's pixel density.</p>

CSS

css
/* 正確な解像度 */
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}

/* 最低解像度 */
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}

/* 最高解像度 */
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}

結果

仕様書

Specification
Compatibility
# css-media-queries-webkit-device-pixel-ratio

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-device-pixel-ratio media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報