내 화면 크기 확인, 모니터 해상도와 브라우저 뷰포트 측정

CSS 미디어 쿼리에서 브레이크포인트를 768px로 잡았는데, 내 노트북 화면에서 그게 어디쯤 걸리는지 감이 안 온다. 브라우저 창을 줄여보면서 감으로 맞추는 것보다 정확한 픽셀 수를 확인하는 게 빠르다.

화면 크기와 뷰포트, 뭐가 다른가

모니터 해상도 (Screen Resolution)

모니터 자체가 표시할 수 있는 전체 픽셀 수다. 1920×1080이면 Full HD, 2560×1440이면 QHD다. 이 수치는 브라우저와 상관없이 고정이다.

브라우저 창 크기 (Window Size)

브라우저가 차지하는 영역의 픽셀 수다. 전체 화면이면 모니터 해상도와 같지만, 창을 줄이면 달라진다.

뷰포트 (Viewport)

웹 페이지가 실제로 렌더링되는 영역이다. 브라우저 창에서 주소창, 탭, 북마크바를 뺀 순수 콘텐츠 표시 영역이다. CSS 미디어 쿼리는 이 뷰포트 너비를 기준으로 작동한다.

확인할 수 있는 정보

화면 크기 확인 도구에 접속하면 별도 입력 없이 현재 기기 정보가 자동으로 표시된다.

• 브라우저 창 크기: 가로 × 세로 (px)
• 모니터 해상도: 화면 전체 픽셀 수
• 뷰포트 크기: CSS가 기준으로 삼는 영역
• DPR: 디바이스 픽셀 비율 (레티나 디스플레이는 2 이상)
• 색상 깊이: 화면이 표현 가능한 색상 비트 수
• 터치 지원: 터치스크린 장치 여부

창 크기를 조절하면 숫자가 실시간으로 바뀌니까, 반응형 브레이크포인트가 정확히 어디서 전환되는지 눈으로 확인할 수 있다.

기기별 해상도 비교

TIP DPR이 2인 레티나 디스플레이에서 CSS 1px은 실제 물리 픽셀 2개에 해당한다. 이미지가 흐릿하게 보인다면 2배 크기 이미지를 준비하면 해결된다.