Окно: свойство devicePixelRatio

Свойство devicePixelRatio интерфейса Window возвращает отношение разрешения в физических пикселях к разрешению в CSS-пикселях для текущего устройства отображения.

Это значение также можно интерпретировать как отношение размеров пикселей: размер одного CSS-пикселя к размеру одного физического пикселя. Проще говоря, это сообщает браузеру, сколько фактических пикселей экрана нужно использовать для отрисовки одного CSS-пикселя.

Это полезно при работе с различиями между отрисовкой на стандартном экране и экране HiDPI или Retina, которые используют больше пикселей экрана для отрисовки одних и тех же объектов, что приводит к более четкому изображению.

Вы можете использовать window.matchMedia(), чтобы проверить, меняется ли значение devicePixelRatio, что может произойти, например, если пользователь перетаскивает окно на дисплей с другой плотностью пикселей. См. пример ниже.

Значение с плавающей запятой двойной точности, указывающее на отношение разрешения дисплея в физических пикселях к разрешению в CSS-пикселях. Значение 1 указывает на классический дисплей с разрешением 96 DPI, а значение 2 ожидается для дисплеев HiDPI/Retina.

Другие значения могут быть возвращены в случае необычно низкого разрешения дисплея или, чаще, когда экран имеет более высокую плотность пикселей, чем удвоенное стандартное разрешение 96 DPI. Современные экраны мобильных устройств — которые предлагают высокое разрешение при небольших физических размерах — часто дают значение devicePixelRatio больше 2.

<canvas> может казаться слишком размытым на экранах с технологией Retina. Используйте window.devicePixelRatio для определения, сколько дополнительной плотности пикселей необходимо добавить, чтобы изображение было более четким.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Set display size (css pixels).
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// Set actual size in memory (scaled to account for extra pixel density).
const scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// Normalize coordinate system to use CSS pixels.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "I love MDN";
ctx.fillText(textString, x, y);

В этом примере мы настроим медиазапрос и будем наблюдать за ним, чтобы увидеть, когда изменяется разрешение устройства, регистрируя новое разрешение.

HTML

<div id="container">
  <p>
    This example demonstrates the effect of zooming the page in and out
    (or moving it to a screen with a different scaling factor) on the
    value of the <code>devicePixelRatio</code> property.</p>
    <p>Try it and watch what happens!</p>
  </p>
</div>
<div id="output"></div>

CSS

body {
  font:
    22px arial,
    sans-serif;
}

#container {
  border: 2px solid #22d;
  margin: 1rem auto;
  padding: 1rem;
  background-color: #a9f;
}

JavaScript

Строка mqString устанавливается в медиазапрос, который проверяет, соответствует ли текущее разрешение отображения определенному количеству точек устройства на px.

Переменная media — это объект MediaQueryList, который инициализируется строкой медиазапроса. При изменении результата выполнения mqString в документе срабатывает событие media объекта change, и код регистрирует новое разрешение.

Обратите внимание, что каждый раз при изменении разрешения пример должен создать новый медиазапрос, основанный на новом разрешении, и новую MediaQueryList экземпляр.

let remove = null;
const output = document.querySelector("#output");

const updatePixelRatio = () => {
  if (remove != null) {
    remove();
  }
  const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
  const media = matchMedia(mqString);
  media.addEventListener("change", updatePixelRatio);
  remove = () => {
    media.removeEventListener("change", updatePixelRatio);
  };

  output.textContent = `devicePixelRatio: ${window.devicePixelRatio}`;
};

updatePixelRatio();

Результат

Чтобы протестировать пример, попробуйте увеличить и уменьшить масштаб страницы и обратите внимание на разницу в зарегистрированном значении devicePixelRatio.

• Медиазапросы
• Использование медиазапросов
• CSS resolution медиазапрос
• Свойство image-resolution