화면 크기 감지기

참고

뷰포트 vs 화면 해상도 — 차이점은?

뷰포트는 브라우저 창 안에서 웹 페이지의 가시 영역으로, CSS 픽셀 단위로 측정됩니다(window.innerWidth × window.innerHeight). 브라우저 크기를 변경하거나 DevTools를 열면 변경됩니다. 화면 해상도는 물리적 디스플레이의 총 픽셀 수입니다(screen.width × screen.height) — 하드웨어와 디스플레이 설정에 의해 고정됩니다. 반응형 웹 디자인에서 중요한 것은 뷰포트입니다 — 어떤 CSS 미디어 쿼리와 브레이크포인트가 활성화되는지 결정합니다.

기기 픽셀 비율(DPR)이란?

기기 픽셀 비율(DPR)은 하나의 CSS 픽셀에 매핑되는 물리적(하드웨어) 픽셀의 수를 나타냅니다. DPR 1은 1:1 매핑(표준 디스플레이). DPR 2는 Retina/HiDPI 디스플레이 — 각 CSS 픽셀이 4개의 물리적 픽셀(2×2)로 렌더링되어 텍스트와 이미지가 더 선명합니다. DPR 3은 고급 스마트폰에서 흔합니다. 이것이 중요한 이유: 고DPR 화면에 @2x/@3x 이미지 제공, Retina 디스플레이에서 스크린샷이 예상 해상도의 두 배인 이유 이해, 특정 DPR 값에서만 나타나는 레이아웃 문제 디버깅.

화면 감지 활용 사례

반응형 디자인 테스트 — DevTools를 열지 않고 CSS 브레이크포인트가 올바른 뷰포트 너비에서 작동하는지 확인. 버그 보고 — 디스플레이 문제를 개발자에게 보고할 때 정확한 뷰포트 크기, 화면 해상도, DPR 공유. 스크린샷 계획 — 문서나 앱 스토어 등록을 위한 스크린샷 촬영 전 정확한 크기 파악. 광고 및 배너 크기 — 뷰포트 크기가 디스플레이 광고에 필요한 광고 슬롯 크기와 일치하는지 확인.

개인정보

모든 정보는 브라우저 API에서 가져오며 서버로 전송되지 않습니다.