모바일, 태블릿 device-pixel-ratio 계산 방법

해당 디바이스의 뷰포트(device-width, height)를 수학공식?처럼 이론적으로 쉽게 구하는 방법입니다.

최근에 프로젝트를 하면서 보안때문에 인터넷이 막힌 상황에서 태블릿 device-width, height 값을 모른채로 일단 작업을 하긴 했었는데 퍼블리싱 작업을 하고 나서 태블릿에서 확인해보니 생각보다 많이 디자인과 멀어져? 있는 화면이 출력되어서 좀 당황 했었습니다.

width값은 크게 상관은 없었지만 특정기기(하이브리드 앱이었습니다.)를 놓고 맞춰야 하는 상황이어서 device-height값을 꼭 알아야 하는 상황이었습니다. 그리고 디자인 자체가 스크롤이 생기면 안되는 화면이 많아서 더더욱 필수로 height값을 알아야 했구요.

제일 확실한 방법은 자바스크립트로 window.documentElement.clientWidth 와 clientHeight를 각 변수에 저장해서 console.log로 찍어보는게 베스트이긴 합니다만 저 처럼 보안때문에 프로젝트 파일을 인터넷으로 올려서 볼 수 없는 상황이라면 이 방법은 시간이 오래걸려서 난감합니다.

이렇때 다음과 같은 방법을 시도해보면 좋습니다.

1. 기본적으로 해당 디바이스의 스펙에서 ppi와 해상도를 알아야 합니다. 저는 갤럭시 탭 S6 Lite 였습니다. 해당 스펙을 찾아보니 해상도는 2000 x 1200, ppi는 224였습니다. (나무위키에서 참고)

2. devicePixelRatio = 해당 기기의 ppi / 150 (왜 150인지는 여기(링크)에서 확인 가능), 저의 경우는 1.493 이 나왔고 반올림하여 1.5로 계산 하였습니다.

3. deviceWidth = 해당기기의 해상도 / devicePixelRatio (저의 경우 1333이 나왔습니다.)

4. deviceHeight = 해당기기의 해상도 / devicePixelRatio (저의 경우 800이 나왔습니다.)

실제로 자바스크립트로 계산을 해보니 width값은 1334이 나왔고 height 값은 오차범위 없이 800으로 나왔습니다. 전체적으로 99%정도가 일치했습니다.

저 처럼 헷갈리는 분들을 위해 포스팅을 해보았습니다.

도움이 되시길 바랍니다.