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

CSS 미디어 쿼리를 잡는데 브레이크포인트가 제대로 걸리지 않는다. 내 모니터가 1920x1080인 줄 알았는데, 실제 브라우저 뷰포트는 그보다 작다. 스크롤바, 북마크바, 개발자 도구 패널까지 빼면 실제 렌더링 영역은 꽤 줄어든다.

해상도와 뷰포트, 뭐가 다른가

화면 해상도 (Screen Resolution)

모니터 전체의 물리적 픽셀 수. 1920x1080이면 가로 1920, 세로 1080 픽셀이다. 윈도우 설정 > 디스플레이에서 확인할 수 있다.

브라우저 뷰포트 (Viewport)

웹 콘텐츠가 실제로 그려지는 영역. 브라우저 탭, 주소창, 북마크바, 스크롤바를 제외한 순수 내부 크기다. CSS에서 100vw, 100vh가 이 값을 기준으로 계산된다.

DPR (Device Pixel Ratio)

CSS 1px을 표현하는 데 쓰이는 물리적 픽셀 수. 맥북 레티나 디스플레이는 DPR이 2이므로, 논리 해상도 1440x900이지만 물리 해상도는 2880x1800이다.

자주 쓰이는 기기별 해상도

반응형 웹에서 해상도가 중요한 이유

미디어 쿼리의 max-width는 화면 해상도가 아니라 뷰포트 기준이다. 같은 1920x1080 모니터라도 윈도우 배율이 125%면 뷰포트는 1536x864가 된다. 이걸 모르면 "내 모니터에서는 잘 보이는데 왜 깨지지?"라는 상황이 생긴다.

TIP 윈도우 배율 설정(100%, 125%, 150%)에 따라 뷰포트 크기가 달라진다. 배율 125%의 FHD 모니터와 배율 100%의 HD 모니터는 뷰포트가 비슷할 수 있다.

지금 내 화면 정보 바로 확인하기

개발자 도구(F12)를 열어서 window.innerWidth를 콘솔에 찍어도 되지만, DPR, 색상 깊이, 터치 지원 여부까지 한 번에 보려면 화면 크기 확인 도구가 편하다. 브라우저 창 크기를 조절하면 수치가 실시간으로 바뀌고, iPhone이나 iPad 같은 주요 기기 해상도와 내 화면을 나란히 비교할 수 있어서 반응형 브레이크포인트를 잡을 때 참고가 된다.

해상도 숫자만 알아서는 부족하다. 뷰포트, DPR, 배율까지 이해해야 반응형 레이아웃이 모든 환경에서 의도대로 나온다.