-webkit-device-pixel-ratio

Baseline 已广泛支持

此特性已成熟稳定，适用于多种设备和浏览器版本。自 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 变体来分别查询最小值和最大值。

值

<number>: 用于表示每个 CSS px 的设备像素数量。尽管该值是 <number>，因此在语法上不允许单位，但其隐式单位是 dppx。

实现

css

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

/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) {
  /* … */
}
/* It is equivalent to: */
@media (max-resolution: 2dppx) {
  /* … */
}

示例

HTML

html

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

CSS

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;
  }
}

结果

规范

规范
兼容性 # css-media-queries-webkit-device-pixel-ratio

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者上次修改于 2025 年 7 月 14 日。

在 GitHub 上查看此页面 • 报告此内容存在的问题