-webkit-device-pixel-ratio

在此页

句法
Implementation
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

-webkit-device-pixel-ratio is a non-standard Boolean CSS media feature which is an alternative to the standard resolution media feature.

注意： This media feature is a WebKit feature. If possible, use the resolution media feature query instead.

句法

-webkit-device-pixel-ratio feature is specified as a <number> value. It is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio variants to query minimum and maximum values, respectively.

值

<number>: The number of device pixels used to represent each CSS px . Although the value is a <number> , and thus doesn't syntactically allow units, its implicit unit is dppx .

Implementation

/* A unit of "dppx" is implied: */
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/* ... is equivalent to: */
@media (min-resolution: 2dppx) { ... }
/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/* ... is equivalent to: */
@media (max-resolution: 2dppx) { ... }

范例

HTML

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

CSS

/* Exact resolution */
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}
/* Minimum resolution */
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}
/* Maximum resolution */
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}

结果

规范

规范	状态	注释
Compatibility Standard The definition of '-webkit-device-pixel-ratio' in that specification.	实时标准	Initial standardization
Safari CSS Reference 'media query extensions' in that document.	Non-standard unofficial documentation	Initial documentation

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-webkit-device-pixel-ratio` media feature 非标	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 63 注意事项完整支持 63 注意事项注意事项 Implemented as an alias for for `-moz-device-pixel-ratio` . 完整支持 49 注意事项 Disabled 注意事项 Implemented as an alias for for `-moz-device-pixel-ratio` . Disabled From version 49: this feature is behind the `layout.css.prefixes.device-pixel-ratio-webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 完整支持 45 注意事项 Disabled 注意事项 Implemented as an alias for for `-moz-device-pixel-ratio` . Disabled From version 45: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true` ) and the preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 3	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 63 注意事项完整支持 63 注意事项注意事项 Implemented as an alias for for `-moz-device-pixel-ratio` . 完整支持 49 注意事项 Disabled 注意事项 Implemented as an alias for for `-moz-device-pixel-ratio` . Disabled From version 49: this feature is behind the `layout.css.prefixes.device-pixel-ratio-webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 完整支持 45 注意事项 Disabled 注意事项 Implemented as an alias for for `-moz-device-pixel-ratio` . Disabled From version 45: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true` ) and the preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。

另请参阅

元数据

最后修改： Aug 14, 2020

在此页

句法

值

Implementation

范例

HTML

CSS

结果

规范

浏览器兼容性

图例

另请参阅

相关话题