Window: devicePixelRatio 속성

Window 인터페이스의 devicePixelRatio 는 현재 디스플레이 장치에 대한 '물리적 픽셀' 해상도와 'CSS 픽셀' 해상도의 비율을 반환합니다.

이 값은 픽셀 크기의 비율로도 해석될 수 있습니다. 하나의 'CSS 픽셀' 크기와 하나의 '물리적 픽셀' 크기를 비교한 값입니다. 간단히 말해서, 이것은 브라우저에 단일 CSS 픽셀을 그리기 위해 화면의 실제 픽셀 중 몇 개를 사용해야 하는지 알려줍니다.

이것은 표준 디스플레이에서 렌더링하는 것과 더 많은 화면 픽셀을 사용하여 더 선명한 이미지를 생성하는 HiDPI 혹은 Retina 디스플레이에서 렌더링하는 것의 차이를 다룰 때 유용합니다.

window.matchMedia()를 사용하여 devicePixelRatio의 값이 변경되는지 확인할 수 있습니다. (예를 들어 사용자가 픽셀 밀도가 다른 디스플레이로 창을 드래그하는 경우 발생할 수 있습니다.) 아래 예시를 참고하시길 바랍니다.

디스플레이의 물리적 픽셀 해상도와 CSS 픽셀 해상도의 비율을 나타내는 배정밀도 부동 소수점 값입니다. 값이 1이면 기존 96 DPI (일부 플랫폼에서는 76 DPI) 디스플레이를 의미하며, 값이 2이면 HiDPI/Retina 디스플레이로 예측됩니다. 비정상적으로 해상도가 낮은 디스플레이의 경우 혹은 화면의 픽셀 깊이가 표준 해상도인 96 혹은 76 DPI의 두 배보다 높은 경우 다른 값이 반환될 수도 있습니다.

예제

<canvas>에서 해상도 수정하기

retina 화면에서 <canvas>가 매우 흐릿하게 보일 수 있습니다. 선명한 이미지를 위해 추가 픽셀 밀도를 얼마나 많이 추가해야 하는지 결정하려면 window.devicePixelRatio를 사용하시길 바랍니다.

HTML

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

JavaScript

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

// 디스플레이 크기 (css 픽셀) 를 설정합니다.
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// 메모리에서 실제 크기를 설정합니다. (추가 픽셀 밀도를 고려한 스케일 조정)
const scale = window.devicePixelRatio; // retina 화면에서 1로 변경하면 캔버스가 흐릿하게 표시됩니다.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// 좌표계를 정규화하여 CSS 픽셀을 사용합니다.
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);

retina 디스플레이에 표시된 이미지에 대한 다른 devicePixelRatio 값의 효과를 나란히 비교합니다.

화면 해상도 혹은 줌 레벨 변경 모니터링

이 예제에서 미디어 쿼리를 설정하고 장치 해상도가 변하는 시점을 관찰하여 새 해상도를 기록합니다.

HTML

html
<div id="container">
  <p>
    이 예제는 페이지를 확대하거나 축소할 때 (혹은 다른 배율이 적용된 화면으로 이동할 때) <code>devicePixelRatio</code> 속성 값에 미치는 영향를 보여줍니다.</p>
    <p>시도해보고 어떤 일이 일어나는지 지켜보시길 바랍니다!</p>
  </p>
</div>
<div id="output"></div>

CSS

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 (en-US) 객체입니다. 문서에 대해 mqString을 실행한 결과가 변하면 media 객체의 change 이벤트가 발생하고 코드가 새 해상도를 기록합니다.

해상도가 변할때 마다, 예제에서는 새로운 해상도에 기반하여 새 미디어 쿼리와 새 MediaQueryList 인스턴스를 생성해야 합니다.

js
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의 기록된 값에 차이가 있는지 확인하길 바랍니다.

명세서

Specification
CSSOM View Module
# dom-window-devicepixelratio

브라우저 호환성

BCD tables only load in the browser

같이 보기