DPI를 구현하는 2가지 방식

한가지는 이미 알고 있던 사용해 왔던 방식입니다.

const DPR = window.devicePixelRatio;
const DPI = DPR * 96;

두번째는 좀더 정확한 DPI를 얻는 방식이라고 합니다.

function getExactDPI() {
  for (let dpi = 1; dpi < 600; dpi++) {
    if (window.matchMedia(`(max-resolution: ${dpi}dpi)`).matches) {
      return dpi;
    }
  }
  return 96; // 기본값
}

어찌되었든 웹에서 DPI는 보안정책 상 정확한 값은 얻기 어렵다고 합니다.