resolution
CSS
media feature
can be used to test the pixel density of the output device.
resolution
feature is specified as a
<resolution>
value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed
min-resolution
and
max-resolution
variants to query minimum and maximum values, respectively.
<p>This is a test of your device's pixel density.</p>
/* Exact resolution */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* Minimum resolution */
@media (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}
/* Maximum resolution */
@media (max-resolution: 300dpi) {
p {
background: yellow;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries
The definition of 'resolution' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
resolution
media feature
|
Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
完整支持
8
|
IE 完整支持 9 |
Opera
完整支持
16
|
Safari
不支持
No
注意事项
|
WebView Android 完整支持 ≤37 | Chrome Android 完整支持 29 |
Firefox Android
完整支持
8
|
Opera Android
完整支持
16
|
Safari iOS
不支持
No
注意事项
|
Samsung Internet Android 完整支持 2.0 |
完整支持
不支持
见实现注意事项。