Window : devicePixelRatio

window 객체 내 devicePixelRatio 속성은 CSS의 1px 이 디스플레이 기기에서 표시되는 비율을 반환한다

 

CSS 의 1px 은 디스플레이 기기에 따라 1px 로 표현될 수도 그 이상으로 표현될 수도 있다.

 

표준 해상도인 96 DPI 에서는 1을 return 하고 Retina 와 같은 고해상도 디스플레이의 경우 2를 반환한다.

디스플레이 기기가 연결되어 있지 않은 경우 1을 반환한다. (관련 링크)

 

window.matchMedia() 함수를 사용해서 아웃풋 기기(디스플레이 기기)의 Ratio 가 변경되었는지 감지하고 대응할 수 있다.

아래는 MDN Example 코드

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();

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#examples