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

반응형 웹을 만들다가 특정 해상도에서 레이아웃이 깨진다. 개발자 도구를 열어서 확인할 수도 있지만, 도구 자체가 화면을 차지해서 실제 뷰포트 크기가 달라진다. 정확한 수치가 필요할 때는 전용 도구가 낫다.

화면 크기, 해상도, 뷰포트 차이

화면 해상도

모니터가 표시할 수 있는 전체 픽셀 수다. 1920x1080이면 Full HD. 이 값은 브라우저를 줄여도 바뀌지 않는다.

브라우저 창 크기

브라우저 창의 바깥 크기(프레임 포함)다. 창을 줄이면 같이 줄어든다.

뷰포트

웹 콘텐츠가 실제로 렌더링되는 영역이다. 브라우저 UI(주소창, 탭 바)를 제외한 크기로, CSS 미디어 쿼리가 참조하는 값이 바로 이것이다.

DPR (Device Pixel Ratio)

CSS 1px이 물리적으로 몇 개의 픽셀에 대응하는지 나타낸다. 레티나 디스플레이는 DPR 2, 일반 모니터는 1이다.

내 화면 정보 확인하기

화면 크기 확인 도구에 접속하면 브라우저 창 크기, 화면 해상도, 뷰포트, DPR, 색상 깊이, 터치 지원 여부가 실시간으로 표시된다. 창 크기를 조절하면 숫자가 바로바로 바뀌어서 반응형 테스트할 때 편하다.

주요 기기 해상도 참고

미디어 쿼리 브레이크포인트를 정할 때 이 표를 참고하면 대부분의 기기를 커버할 수 있다. 내 모니터가 정확히 어떤 사양인지 모를 때 접속만 하면 바로 확인되니 북마크해두면 유용하다.