화면 해상도 확인

사용 방법

1. 페이지를 열어 현재 브라우저가 보고한 화면과 뷰포트 값을 확인합니다.
2. 창 크기를 바꾸거나 기기를 회전하거나 손가락으로 확대해 관련 값이 바뀌는지 확인합니다.
3. 반응형 화면 문제를 재현할 때는 레이아웃 뷰포트와 현재 CSS 중단점을 기준으로 삼습니다.
4. 오류 보고나 테스트 메모에 붙여 넣을 때는 보고서 및 CSS 쿼리 복사를 누릅니다.

화면·레이아웃 뷰포트·시각 뷰포트는 서로 다른 영역입니다

브라우저는 한 가지 크기만 알려 주지 않습니다. 화면 너비와 높이는 브라우저에 공개된 화면 영역이고, 사용 가능 화면은 운영체제가 예약한 영역을 제외해 제공할 수 있는 값입니다. 레이아웃 뷰포트는 웹페이지를 배치하는 좌표 영역이므로 CSS의 width 미디어 쿼리는 모니터에 적힌 해상도가 아니라 이 값을 기준으로 동작합니다. 시각 뷰포트는 그 레이아웃 중 현재 실제로 보이는 부분입니다. 휴대폰에서 확대하면 레이아웃 뷰포트보다 작아질 수 있습니다. 현재 Chrome·Safari·Firefox는 시각 뷰포트 API를 제공하며, 다른 브라우저에서 이 API가 없으면 레이아웃 값으로 대체하지 않고 확인 불가로 표시합니다. CSSOM View 규격은 이 API 값의 단위를 CSS 픽셀로 정하며, 브라우저는 개인정보 보호를 위해 화면 정보를 줄여서 제공할 수도 있으므로 이 도구는 하드웨어 측정값이라고 단정하지 않습니다.

DPR과 확대 배율이 같은 기기에서 다른 숫자를 만드는 이유

기기 픽셀 비율(DPR)은 레이아웃에 쓰는 CSS 픽셀과 기기 픽셀의 관계입니다. DPR이 2이면 보통 100 × 100 CSS 픽셀 상자가 가로세로 각각 약 200개의 기기 픽셀로 그려져 고밀도 화면에서 더 선명하게 보일 수 있습니다. 페이지 확대는 DPR을 바꿀 수 있지만, 핀치 확대는 시각 뷰포트 배율로 나타나며 레이아웃 뷰포트 너비를 바꾸지 않을 수 있습니다. 다른 모니터로 창을 옮기기, 운영체제 배율, 브라우저 확대, 원격 데스크톱, 지문 추적 방지 기능도 브라우저가 주는 값에 영향을 줍니다. 따라서 곱셈 결과는 렌더링 상황을 이해하는 데 쓰되, 모니터 패널의 네이티브 격자를 증명하는 값으로 보면 안 됩니다.

복사한 미디어 쿼리로 반응형 문제를 다시 확인하세요

중단점 카드는 널리 쓰는 640·768·1024·1280·1536 CSS 픽셀 기준을 적용합니다. 현재 레이아웃 뷰포트가 속한 범위를 보여 주고, 예를 들어 @media (min-width: 1024px) and (max-width: 1279.98px)처럼 상한을 포함한 쿼리를 복사합니다. 브라우저 도구막대, 화면 분할, 사이드바 때문에 레이아웃 뷰포트는 화면 해상도보다 훨씬 좁을 수 있으므로, 단순히 1920 × 1080이라고 전달하는 것보다 이 범위가 웹 레이아웃 문제 재현에 더 직접적입니다. 실제 컴포넌트는 높이, 컨테이너 쿼리, 글꼴 로딩, 브라우저별 동작에도 영향을 받을 수 있습니다.

자주 묻는 질문