[JavaScript] 자바스크립트에서 디바이스 화소 확인하기

092_자바스크립트에서 디바이스 화소 확인하기

[적용]

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

---

[문법]

속성	의미	반환
window.devidePixelRatio	화소 비율의 값	숫자

---

[내용]

고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말한다.

고해상도에 맞춰 처리 작업을 하지 않으면 해당 기기에서 사진 등이 뿌옇게 보이거나 화소가 깨져 보이는 현상이 발생할 수 있다.

디스플레이 해상도의 물리 화소 확인은 window 객체 devicePixelRatio 속성을 사용한다.

레티나 디스펠레이 등 고해상도 디스플레이 대응

const dpr = window.devicePixelRatio;

일반적인 디스플레이의 비율이 1, 아이폰과 안드로이드 대부분은 2, 고급 사양의 아이폰과 안드로이드는 3인 경우도 있다.

윈도우즈(Windows)와 맥OS(masOS)가 2인 경우도 있으며, 앞으로 2 이상의 기기들이 더욱 늘어날 전망이다.

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김