화면 해상도와 Viewport

화면 해상도는 브라우저가 공개하는 전체 Screen 크기입니다. Viewport는 현재 웹 페이지를 표시할 수 있는 브라우저 내부 영역으로 창 테두리 등의 UI를 제외합니다.

NetKarte의 취득 방식

NetKarte의 기기 카드에서 화면 해상도와 Viewport를 비교합니다. 레이아웃 문제를 조사할 때는 문제가 발생하는 창 너비로 맞추고 재진단한 뒤 Viewport 값을 확인하세요.

Screen은 window.screen.width와 height, Viewport는 window.innerWidth와 innerHeight를 사용해 CSS Pixel로 표시합니다. 창 크기와 방향에 따라 Viewport가 바뀝니다.

결과 읽는 법

1920 × 1080 px 화면에서도 브라우저를 절반 너비로 열면 Viewport는 작아집니다. 모바일에서는 주소 표시줄, 확대와 회전으로 값이 변할 수 있습니다.

오해하기 쉬운 점

표시값은 패널의 물리 Pixel 수와 다를 수 있습니다. OS Scale과 DPR 때문에 차이가 나며 Screen 크기만으로 기기 모델을 확정할 수 없습니다.

레이아웃 문제 조사 순서

1. 문제가 발생하는 너비로 브라우저를 조정합니다.
2. 재진단해 Viewport 너비와 높이를 봅니다. NetKarte는 수집 시점의 값이며 크기 변경을 계속 추적하지 않습니다.
3. 화면 크기와 DPR을 함께 봅니다.

설명용으로 화면은 1920px이고 페이지 영역은 768px라면 레이아웃에서는 주로 후자가 기준입니다. 모바일 핀치 확대 후 보이는 영역도 이 레이아웃 Viewport와 항상 같지는 않습니다. 물리적 인치나 기종은 알 수 없습니다.