[책] 자바스크립트 코드 레시피 278 - 84일차

디바이스 화소 확인하기

• 디바이스 화소 비율에 따라 제어 방식을 구분하고 싶을 때
• 고해상도 디바이스에서 큰 이미지를 사용하고 싶을 때

구문

window.devicePixelRatio;

실습

고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말합니다. 고해상도에 맞춰 처리 작업을 하지 않으면 해당 기기에서 사진 등이 뿌옇게 보이거나 화소가 깨져 보이는 현상이 발생할 수 있습니다. 디스플레이 해상도의 물리 화소 확인은 window 객체 devicePixelRatio 속성을 사용합니다.

const dpr = window.devicePixelRatio;
console.log(dpr);

일반적인 디스플레이의 비율이 1, 아이폰과 안드로이드 대부분은 2, 고급 사양의 아이폰과 안드로이드는 3인 경우도 있습니다. 윈도우즈(window) 와 맥OS(macOS) 가 2인 경우도 있으며, 앞으로 2 이상의 기기들이 늘어날 전망이라고 책에 작성이 되어있습니다. (현재 디스플레이 비율 확인하셔야 합니다.)