-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 2018年10月.
-webkit-device-pixel-ratio は CSS の標準外の論理メディア特性で、標準の resolution メディア特性の代替です。
メモ: 可能であれば、代わりに標準のメディア特性である resolution メディア特性クエリーを使用してください。子の接頭辞付きのメディアクエリーは WebKit の特性であり、他のブラウザーエンジンは対応していない可能性があります。下記のブラウザーの互換性を参照してください。
構文
-webkit-device-pixel-ratio 特性は <number> 値で指定されます。これは範囲特性であり、接頭辞が付いた -webkit-min-device-pixel-ratio および -webkit-max-device-pixel-ratio の変化形を使用して、それぞれ最低値と最高値で問い合わせることもできます。
値
実装
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 |