`-webkit-device-pixel-ratio` — медиафункция CSS

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с октября 2018 года.

-webkit-device-pixel-ratio — нестандартная логическая функция CSS медиазапроса, являющаяся альтернативой стандартной функции медиазапроса resolution.

Примечание: По возможности используйте запрос функции медиазапроса resolution, которая является стандартной функцией медиазапроса. Хотя эта функция медиазапроса с префиксом относится к WebKit, её могут поддерживать и другие движки браузеров. См. раздел о совместимости с браузерами ниже.

Синтаксис

Функция -webkit-device-pixel-ratio задаётся значением <number>. Это функция диапазона, поэтому для проверки минимальных и максимальных значений можно также использовать варианты с префиксами -webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio соответственно.

Значения

<number>: Количество пикселей устройства, используемых для представления каждой px CSS. Хотя значение является <number> и поэтому синтаксически не допускает единиц измерения, его неявная единица — dppx.

Реализация

/* 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

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

Результат

Спецификации

Спецификация
Совместимость # css-media-queries-webkit-device-pixel-ratio

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`-webkit-device-pixel-ratio`	1	12	63 Реализована как псевдоним для `-moz-device-pixel-ratio`.	15	3	18	63 Реализована как псевдоним для `-moz-device-pixel-ratio`.	14	1	1.0	4.4	1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/-webkit-device-pixel-ratio