CSS 미디어 쿼리로 반응형 웹 만들고 있다. 768px 이하에서 레이아웃이 바뀌게 했는데, 지금 내 브라우저 창이 몇 픽셀인지 모르겠다. 개발자 도구 열어서 확인하기 귀찮다.
브라우저 창 크기 실시간 확인
화면 크기 확인 페이지 열어두면 창 크기가 실시간으로 표시된다. 창 늘리거나 줄일 때마다 숫자가 바뀐다.
브라우저 크기는 뷰포트 크기다. 주소창이나 탭 영역 제외하고 실제 콘텐츠가 표시되는 영역. 반응형 브레이크포인트 테스트할 때 이 값이 필요하다.
뷰포트 vs 모니터 해상도
두 가지가 다르다:
1920x1080 모니터에서 브라우저를 반으로 줄이면 뷰포트는 960x??? 정도가 된다. 해상도 확인으로 둘 다 볼 수 있다.
DPR(디바이스 픽셀 비율)
레티나 디스플레이나 고해상도 모니터에서는 DPR 확인이 중요하다. DPR 2면 CSS 1픽셀이 실제 4픽셀로 렌더링된다.
디바이스 픽셀 비율이 높으면 이미지가 흐릿하게 보일 수 있다. 2x, 3x 이미지를 제공해야 선명하게 나온다.
그 외 정보
화면 해상도 측정에서 추가로 확인할 수 있는 것:
- 색상 깊이 (비트)
- 화면 방향 (가로/세로)
- 터치 지원 여부
모바일인지 데스크톱인지 판단하는 데 참고할 수 있다.
기기별 해상도 비교
iPhone, iPad, MacBook, 4K 모니터 등 주요 기기의 해상도가 표로 정리되어 있다. 화면 크기 비교하면서 내 디자인이 어떤 기기에서 어떻게 보일지 예상할 수 있다.
반응형 테스트할 때 타겟 기기의 뷰포트 크기를 참고해서 브레이크포인트를 정하면 된다.
개발자 도구 없이 간단히
크롬 개발자 도구(F12)에서도 화면 크기 볼 수 있지만, 패널이 너무 많아서 복잡하다. 화면 크기 확인 페이지는 큼직하게 숫자만 딱 보여줘서 편하다.
창 크기 조절하면서 768px, 1024px 같은 브레이크포인트 도달했는지 실시간으로 확인할 수 있다.
정리
반응형 웹 개발할 때 화면 크기 확인 페이지 띄워두면 유용하다. 뷰포트 크기, 모니터 해상도, DPR 다 실시간으로 볼 수 있고, 기기별 해상도 비교도 된다.