내 모니터 해상도 확인하는 법, 화면 크기와 뷰포트 차이

CSS 미디어 쿼리를 작성하는데, 내 모니터에서 브레이크포인트가 제대로 작동하는지 확인하고 싶었다. 그런데 '내 화면이 정확히 몇 픽셀인지'를 알아야 기준을 잡을 수 있다. 운영체제 설정에서 찾을 수도 있지만, 브라우저에서 바로 확인하는 게 더 빠르다.

해상도, 뷰포트, 브라우저 창 크기의 차이

화면 해상도 (Screen Resolution)

모니터 자체의 물리적 픽셀 수다. 1920×1080이면 가로 1920개, 세로 1080개의 픽셀이 있다는 뜻이다. 이 값은 브라우저 크기와 상관없이 고정이다.

브라우저 창 크기 (Window Size)

브라우저 윈도우의 너비와 높이다. 창을 줄이거나 키우면 실시간으로 바뀐다. 주소창, 북마크바, 탭 영역을 포함한 전체 창 크기다.

뷰포트 (Viewport)

웹 콘텐츠가 실제로 표시되는 영역이다. 브라우저 창에서 주소창, 도구 모음 등을 뺀 순수 콘텐츠 영역의 크기다. CSS 미디어 쿼리는 이 뷰포트 크기를 기준으로 동작한다.

DPR(기기 픽셀 비율)이란

맥북 레티나 디스플레이는 DPR이 2다. 화면 해상도가 2560×1600이지만, CSS에서는 1280×800으로 처리된다. 물리 픽셀 4개로 CSS 1픽셀을 표현하기 때문이다. 일반 모니터는 DPR이 1이고, 최신 스마트폰은 2~3까지 올라간다.

일반 기기 해상도 비교

화면 크기 확인 도구를 열면 접속하는 순간 현재 해상도, 뷰포트, DPR, 색상 깊이까지 한 화면에 자동으로 표시된다. 창 크기를 바꾸면 실시간으로 값이 업데이트되니까, 반응형 브레이크포인트를 테스트할 때 유용하다.

해상도 숫자가 높다고 화면이 넓은 게 아니다. DPR까지 고려해야 실제 작업 공간이 얼마인지 정확히 파악할 수 있다.