[임시] 반응형 웹/앱 - 디바이스의 실제 width 값 계산하는 방법

웹을 반응형으로 만들 때, 미디어 쿼리를 이용해 width을 기점으로 하여 

앱 / 태블릿 / pc 를 분기하곤 합니다.

 

여기서 의문점이 하나 든게

iPhone 12 Pro는 픽셀값이

2532 x 1170 (세로 x 가로) 로 표기되어 있습니다.

 

그렇다면 width 기준도 픽셀이니, 최신 핸드폰은 웹으로 들어갔을 때 미디어 쿼리에서 모바일이 아니라,

pc 형태의 디자인으로 나와야 되는거 아닌가?

라는 생각을 할 수 있습니다.

 

왜 픽셀값이 1000이 넘는데 여전히 모바일 뷰일까요?

그건 스펙에 나온 픽셀과 viewport가 기준으로 삼는 픽셀이 다르기 때문입니다.

위 사진의 스펙에 나온 건 물리적인 픽셀수

viewport가 기준은 css 픽셀입니다.

 

물리적인 픽셀수를 css 픽셀을 계산하는 방법

우선 궁금한 디바이스의 장치 픽셀 비율(device pixel ratio) 을 검색합니다.

ex) iPhone 12 pro device pixel ratio

 

레티나 디스플레이 기준으로 보통 2~3의 값을 가지는 데

iPhone 12 pro는 3입니다.

 

그럼 아까 스펙 상에 나온 물리 픽셀수를 장치 픽셀 비율로 나눠주면 됩니다.

2532 / 3  = 844

1170 / 3 = 390

 

iPhone 12 pro의 css 픽셀은 844x390(세로x가로) 입니다.

이래서 스펙상 가로 픽셀이 1000이 넘지만, 모바일 뷰로 나오는 것입니다.