-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 上檢視此頁面 • 報告此內容存在的問題