사용 방법

페이지를 여세요. 브라우저에서 값을 바로 읽어 표시합니다.
창 크기를 조정하거나 기기를 회전해 뷰포트 크기와 방향이 바뀌는 것을 확인하세요.
‘모두 복사’를 눌러 정보를 버그 신고나 지원 요청에 붙여넣으세요.

작동 방식

브라우저는 웹 페이지의 레이아웃에 사용되는 단위인 CSS 픽셀로 크기를 표시합니다. 고밀도 디스플레이에서는 CSS 픽셀 하나를 여러 물리적 픽셀로 표현합니다. 기기 픽셀 비율(DPR)은 물리적 픽셀 몇 개가 CSS 픽셀 하나에 해당하는지 알려줍니다. 예를 들어 390 × 844, DPR 3으로 표시되는 휴대전화의 패널 해상도는 약 1170 × 2532 기기 픽셀입니다. 데스크톱에서는 브라우저 확대/축소와 운영체제의 디스플레이 배율이 모두 DPR과 CSS 크기를 바꾸므로, 배율 125%인 2560 × 1440 모니터는 2048 × 1152로 표시됩니다.

화면 해상도는 디스플레이 전체 크기입니다. 사용 가능한 화면 공간은 Windows 작업 표시줄이나 macOS 메뉴 막대처럼 운영체제에서 항상 표시되는 막대를 제외한 영역입니다. 뷰포트는 브라우저 창에서 페이지가 표시되는 영역으로, 툴바는 제외하지만 스크롤바는 포함합니다. CSS 미디어 쿼리의 min-width: 768px 같은 조건은 뷰포트에 반응하므로, 반응형 레이아웃을 테스트할 때 확인해야 하는 값은 뷰포트 크기입니다.

색상 구성표와 동작 줄이기 값은 웹사이트가 시스템 설정에 맞게 화면을 조정할 때 사용하는 것과 같은 CSS 미디어 기능에서 가져옵니다. 브랜드, 플랫폼, 모바일 값은 User-Agent Client Hints에서 가져오며, Chromium 기반 브라우저에서만 제공됩니다. 일부 브라우저는 핑거프린팅을 어렵게 만들기 위해 이 값을 의도적으로 반올림하거나 고정하므로 실제 하드웨어와 정확히 일치하지 않을 수 있습니다.

예시

반응형 레이아웃 테스트

동료의 노트북에서 레이아웃이 깨집니다. 동료가 정보를 복사해 보니 뷰포트는 1280 × 649, DPR은 1.5였습니다. 같은 뷰포트로 브라우저의 기기 툴바를 설정해 문제를 재현해 보세요.

이미지 크기 선택

제품 이미지가 CSS 픽셀 기준 너비 400px로 표시됩니다. DPR 3인 휴대전화에서 선명하게 보이려면 1200픽셀이 필요하므로 srcset에 포함할 이미지 크기를 정할 수 있습니다.

모니터 배율 확인

3840 × 2160 모니터가 DPR 1.5에서 2560 × 1440으로 표시된다면 Windows 디스플레이 배율은 150%입니다.

자주 묻는 질문

화면 해상도가 모니터 사양과 다른 이유는 무엇인가요?

브라우저는 물리적 픽셀 수를 배율로 나눈 CSS 픽셀 값을 표시합니다. 표시된 값에 기기 픽셀 비율을 곱하면 실제 하드웨어 해상도에 가까운 값을 얻을 수 있습니다. 브라우저 확대/축소도 표시되는 값에 영향을 줍니다.

화면 크기와 뷰포트 크기는 어떻게 다른가요?

화면 크기는 디스플레이 전체 크기입니다. 뷰포트는 브라우저 창 안에서 페이지가 표시되는 영역만 가리키므로 더 작으며, 창 크기를 조정하거나 개발자 도구를 열면 달라집니다.

이 정보로 나를 추적하나요?

이 페이지에서는 그렇지 않습니다. 값은 사용자에게만 표시되며 저장되거나 어디에도 전송되지 않습니다. 웹사이트는 같은 값을 읽을 수 있으며, 일부 브라우저가 핑거프린팅을 어렵게 만들기 위해 값을 반올림하는 이유도 여기에 있습니다.

노트북에 터치 지원이 표시되는 이유는 무엇인가요?

터치 지원 여부는 브라우저가 보고하는 터치 포인트 수를 기준으로 합니다. 터치스크린이 있는 노트북은 주로 마우스를 사용하더라도 터치 포인트를 보고합니다. 일부 드라이버나 원격 데스크톱 환경에서는 터치스크린이 없어도 터치 지원으로 표시될 수 있습니다.

개인정보 보호

모든 값은 브라우저에서 JavaScript로 읽어 사용자에게만 표시됩니다. 저장되거나 업로드되지 않으며 분석에도 포함되지 않습니다. 도구가 열리고 사용되었다는 익명 이벤트만 기록됩니다.