이 페이지에서 보여 주는 정보
- 화면 해상도 – 웹사이트가 레이아웃에 쓰는 단위인 CSS 픽셀로 나타낸 화면 크기입니다.
- 물리 픽셀 – 패널에 있는 실제 픽셀 수입니다. 휴대폰, 태블릿, 고해상도(High-DPI) 노트북(레티나 디스플레이 등)에서는 CSS 픽셀 하나를 물리 픽셀 여러 개로 그리기 때문에 이 값이 더 큽니다.
- 기기 픽셀 비율 – CSS 픽셀 하나를 이루는 물리 픽셀의 수입니다. Windows 디스플레이 배율 125%나 150%는 여기서 1.25나 1.5로 나타납니다.
- 뷰포트 – 브라우저 창 안에서 보이는 영역의 크기입니다. 창 크기를 바꾸면서 값이 바뀌는 것을 확인해 보세요.
모든 정보는 브라우저에서 직접 읽습니다. 서버로는 아무것도 전송되지 않으며, 이 페이지는 여기 보이는 것 외에는 아무것도 볼 수 없습니다.
자주 쓰는 화면 해상도
| 1366 × 768 | 오래되었거나 저렴한 노트북 (HD) |
|---|---|
| 1920 × 1080 | Full HD – 데스크톱 모니터와 노트북에서 가장 흔한 해상도 |
| 2560 × 1440 | QHD / 1440p – 게이밍 모니터와 사무용 모니터로 인기 |
| 3840 × 2160 | 4K UHD – TV와 고급 모니터 |
| 390 × 844, 393 × 852 | 흔히 쓰는 최신 아이폰 (CSS 픽셀 기준) |
| 360 × 800, 412 × 915 | 흔히 쓰는 안드로이드 폰 (CSS 픽셀 기준) |
자주 묻는 질문
4K 모니터인데 왜 2560 × 1440이나 1920 × 1080으로 나오나요?
글자가 너무 작아지지 않도록 운영체제가 화면 배율을 높여(예: 150%나 200%) 표시하고 있기 때문입니다. 실제 해상도는 물리 픽셀 행에서 볼 수 있습니다.
웹 개발자에게 이 정보가 왜 필요한가요?
뷰포트 크기와 픽셀 비율을 알면 반응형 레이아웃을 테스트하고, 이미지 크기를 정하고, 사용자가 알려 준 버그를 재현하는 데 도움이 됩니다. 모든 정보 복사를 누르면 모든 내용을 버그 리포트에 붙여 넣을 수 있습니다.