CSS 미디어 쿼리 브레이크포인트를 잡고 있는데, 지금 보고 있는 모니터가 정확히 몇 x 몇인지 모르겠다. 디스플레이 설정에서 본 숫자랑 브라우저 실제 뷰포트 크기가 다른 것 같기도 하다.
해상도, 뷰포트, DPR은 다른 개념이다
혼동하기 쉬운 세 가지를 먼저 구분하자.
- 화면 해상도: 모니터의 물리적 픽셀 수. 1920x1080이면 가로 1920개, 세로 1080개의 점으로 화면을 구성한다
- 뷰포트: 브라우저에서 웹 콘텐츠가 실제로 표시되는 영역. 주소창, 탭, 북마크바를 뺀 나머지 공간이다
- DPR(Device Pixel Ratio): CSS 1px이 실제 몇 개의 물리적 픽셀에 대응하는지를 나타낸다. 레티나 디스플레이는 DPR이 2라서 해상도가 높아도 CSS 픽셀 기준으로는 절반 크기다
방법 1. 윈도우 디스플레이 설정
바탕화면에서 마우스 우클릭 → 디스플레이 설정에 들어가면 디스플레이 해상도 항목이 있다. 여기에 나오는 숫자가 모니터의 출력 해상도다. 다만 배율이 125%나 150%로 설정되어 있으면 실제 CSS 픽셀 크기는 이보다 작다.
방법 2. 브라우저 개발자 도구
크롬에서 F12를 누르고 콘솔 탭에 아래 코드를 입력하면 현재 뷰포트 크기를 바로 알 수 있다.
window.innerWidth + ' x ' + window.innerHeight화면 해상도 전체를 보려면 screen.width와 screen.height를 쓴다. 브라우저 창 크기를 바꿀 때마다 다시 입력해야 해서 반복 작업에는 불편하다.
방법 3. 온라인에서 실시간 확인
창 크기를 드래그할 때마다 수치가 바뀌는 걸 실시간으로 봐야 할 때는 화면 크기 측정 도구가 편하다. 브라우저 뷰포트, 화면 해상도, DPR, 색상 깊이까지 한 화면에 표시되고, 일반적인 기기 해상도와 비교도 가능해서 반응형 브레이크포인트를 잡을 때 참고하기 좋다.
TIP 듀얼 모니터 환경이라면 브라우저를 확인하고 싶은 모니터로 옮긴 뒤 측정해야 정확하다. 두 모니터의 해상도와 배율이 다르면 같은 브라우저 창이라도 수치가 달라진다.
반응형 웹을 만들 때 가장 많이 쓰는 브레이크포인트는 768px(태블릿), 1024px(작은 데스크탑), 1440px(일반 데스크탑)이다. 내 모니터 해상도를 정확히 알아야 어느 구간에서 레이아웃이 깨지는지 잡을 수 있다.