화면/기기 정보
내 화면 해상도, 실제 픽셀, 뷰포트 크기, DPR, 주사율을 바로 확인하세요
CSS 픽셀 = 실제 픽셀 ÷ 배율입니다. 브라우저 확대/축소(Ctrl +/-)나 Windows 디스플레이 배율을 바꾸면 해상도·뷰포트·DPR 값이 함께 바뀝니다. 창 크기를 조절하면 뷰포트가 실시간으로 갱신됩니다.
지금 적용 중인 반응형 브레이크포인트
뷰포트 너비 —px 기준 (min-width). 창 크기를 바꾸면 바로 반영됩니다.
화면 정보
디스플레이·입력 기능
브라우저는 주사율을 직접 알려주지 않아 화면 갱신 간격(requestAnimationFrame)으로 추정합니다. 절전 모드·가변 주사율(VRR)·백그라운드 탭에서는 실제보다 낮게 나올 수 있어요.
PPI·화면 크기 계산기
해상도와 대각선 길이(인치)를 넣으면 PPI, 도트 피치, 실제 가로·세로 크기를 계산합니다.
- 도트 피치 (픽셀 간격)
- 0.277 mm
- 화면 가로 × 세로
- 53.1 × 29.9 cm
- 비율
- 16:9
브라우저는 화면의 실제 물리 크기를 알 수 없습니다. 제품 사양에 적힌 대각선 인치와 패널 해상도를 넣어야 정확합니다.
주요 기기 해상도 (참고)
기본 설정 기준의 참고값입니다. 디스플레이 배율·확대 설정·세부 모델에 따라 실제 값은 다를 수 있습니다. 내 화면과 같은 행은 강조 표시됩니다.
| 기기 | 화면 (CSS px) | DPR | 실제 픽셀 |
|---|---|---|---|
| iPhone SE 2/3 · 폰 | 375 × 667 | 2x | 750 × 1334 |
| iPhone 13 / 14 · 폰 | 390 × 844 | 3x | 1170 × 2532 |
| iPhone 15 / 16 · 폰 | 393 × 852 | 3x | 1179 × 2556 |
| iPhone 16 Pro · 폰 | 402 × 874 | 3x | 1206 × 2622 |
| iPhone 15 Pro Max / 16 Plus · 폰 | 430 × 932 | 3x | 1290 × 2796 |
| iPhone 16 Pro Max · 폰 | 440 × 956 | 3x | 1320 × 2868 |
| Galaxy S24 · 폰 | 360 × 780 | 3x | 1080 × 2340 |
| iPad mini 6 · 태블릿 | 744 × 1133 | 2x | 1488 × 2266 |
| iPad 10 · 태블릿 | 820 × 1180 | 2x | 1640 × 2360 |
| iPad Pro 11" (M1/M2) · 태블릿 | 834 × 1194 | 2x | 1668 × 2388 |
| MacBook Air 13" (M1) · 노트북 | 1440 × 900 | 2x | 2880 × 1800 |
| MacBook Pro 14" · 노트북 | 1512 × 982 | 2x | 3024 × 1964 |
| 15.6" FHD · 노트북 | 1536 × 864 | 1.25x | 1920 × 1080 |
| 24" FHD · 모니터 | 1920 × 1080 | 1x | 1920 × 1080 |
| 27" QHD · 모니터 | 2560 × 1440 | 1x | 2560 × 1440 |
| 27" 4K · 모니터 | 2560 × 1440 | 1.5x | 3840 × 2160 |
사용 가이드
화면 해상도 확인 도구란?
접속 중인 기기의 화면 해상도(CSS 픽셀), 실제 픽셀, 브라우저 뷰포트 크기, 기기 픽셀 비율(DPR), 화면 비율, 주사율(추정), HDR·색 영역, 입력 장치(터치/마우스)를 한 번에 보여주는 도구입니다. 지금 적용 중인 Tailwind·Bootstrap 브레이크포인트, PPI 계산기, 주요 기기 해상도 참고표도 함께 제공합니다. 모든 정보는 브라우저 안에서만 읽으며 서버로 전송하지 않습니다.
이것만 알면 된다: 용어 정리
- 화면 해상도(CSS 픽셀): 브라우저가 알려주는 screen.width × screen.height. 웹페이지 레이아웃과 미디어 쿼리는 이 단위로 동작합니다.
- 실제 픽셀: 화면 해상도 × DPR. Windows 150% 배율에서 1280 × 720으로 보이면 실제 패널은 약 1920 × 1080입니다.
- DPR(기기 픽셀 비율): CSS 1px에 들어가는 실제 픽셀 수. 레티나·고해상도 폰은 2~3, 일반 FHD 모니터(100%)는 1입니다.
- 뷰포트: 스크롤바를 포함한 브라우저 창 안쪽 크기(innerWidth × innerHeight). 반응형 브레이크포인트의 기준입니다.
- PPI: 1인치당 픽셀 수. 대략 일반 모니터 90~110, 노트북 140~230, 스마트폰 400 이상입니다.
사용 방법
- 1. 페이지를 열면 맨 위 파란 카드에 내 화면 해상도와 실제 픽셀, 뷰포트, DPR이 바로 표시됩니다.
- 2. 브라우저 창 크기를 조절하거나 기기를 회전하면 뷰포트와 브레이크포인트가 실시간으로 바뀝니다.
- 3. 모니터 PPI가 궁금하면 PPI 계산기에서 '내 화면 실제 픽셀 넣기'를 누르고 제품 사양의 대각선 인치를 입력하세요.
- 4. 버그 리포트나 고객 지원 문의에는 '전체 복사(텍스트)' 또는 'JSON 복사'로 환경 정보를 붙여넣으세요.
활용 팁
- Windows에서 해상도가 모니터 사양보다 작게 보인다면 디스플레이 배율(125%, 150%) 때문입니다. '실제 픽셀' 값이 패널 해상도에 가깝습니다.
- 브라우저를 확대/축소한 상태에서는 DPR과 해상도 값이 달라지므로, 정확히 확인하려면 Ctrl+0으로 100%로 되돌린 뒤 새로고침하세요.
- DPR이 2 이상인 화면에서는 이미지·아이콘을 2배 해상도(srcset, SVG)로 제공해야 흐릿하지 않습니다.
- 주사율은 추정값입니다. 노트북 절전 모드나 백그라운드 탭에서는 낮게 측정될 수 있으니 '주사율 다시 측정'으로 확인하세요.
자주 묻는 질문
브라우저는 해상도를 CSS 픽셀 단위로 알려주기 때문입니다. Windows 디스플레이 배율이 150%면 1920÷1.5 = 1280, 125%면 1536으로 표시됩니다. 이때 DPR은 1.5나 1.25로 나오며, 해상도 × DPR = 실제 픽셀입니다.
화면 해상도는 모니터(또는 폰 화면) 전체 크기이고, 뷰포트는 주소창·탭·작업표시줄을 뺀 브라우저 창 안쪽 크기입니다. 웹페이지의 반응형 레이아웃은 뷰포트 너비를 기준으로 바뀝니다.
아니요. 브라우저는 주사율과 물리적 화면 크기를 제공하지 않습니다. 주사율은 화면 갱신 간격으로 추정한 값이고, 인치 단위 크기는 PPI 계산기에 제품 사양의 대각선 길이를 직접 넣어야 계산할 수 있습니다.
아닙니다. 모든 정보는 브라우저에서 JavaScript로 읽어 화면에 표시할 뿐, 서버로 전송하거나 저장하지 않습니다.
화면/기기 정보 확인 도구란?
화면/기기 정보 확인 도구는 현재 접속 중인 기기의 화면 해상도, 뷰포트 크기, 브라우저 종류와 버전, 운영체제, CPU 코어 수, 기기 픽셀 비율(DPR) 등 상세한 시스템 정보를 즉시 표시해 주는 온라인 유틸리티입니다. 웹 개발 시 반응형 디자인 디버깅, 기술 지원 문의 시 환경 정보 전달, 기기 성능 확인 등에 폭넓게 활용됩니다.
화면/기기 정보 도구 활용 팁
- 반응형 웹 개발 디버깅: CSS 미디어 쿼리는 물리적 해상도가 아닌 CSS 픽셀(뷰포트) 기준으로 작동합니다. 뷰포트 크기를 확인하면 브레이크포인트가 올바르게 적용되는지 검증할 수 있습니다.
- 기술 지원 정보 제공: 소프트웨어 버그나 오류를 신고할 때 브라우저 버전, OS, 화면 해상도 등 이 도구에서 확인한 정보를 함께 전달하면 문제 재현과 해결이 빨라집니다.
- 레티나 디스플레이 확인: Device Pixel Ratio(DPR)가 2 이상이면 레티나/고해상도 디스플레이입니다. 이미지와 아이콘을 2배 해상도로 제공해야 선명하게 표시됩니다.
- 전체 정보 복사: 모든 기기 정보를 한 번에 클립보드에 복사하는 기능을 이용하면 개발팀이나 기술 지원팀에 빠르게 환경 정보를 공유할 수 있습니다.