내 화면·디스플레이 정보
screen의 화면 크기, 운영체제 UI를 제외한 사용 가능 영역, 페이지 레이아웃 영역, 확대 상태에서 보이는 시각 뷰포트를 나누어 표시합니다. 정보 읽기 이후에는 창 크기·회전·줌 변화를 감지하며, 자동 갱신 중단이나 지우기로 관찰을 종료할 수 있습니다. 브라우저가 보고한 값이므로 패널의 제조사 해상도나 실제 인치 크기를 알아내는 도구는 아닙니다.
주요 기능
- 화면·사용 가능 영역·레이아웃·시각 뷰포트 구분
- DPR과 시각 뷰포트 scale을 각각 표시
- 창 크기·화면 회전·줌 변경의 자동 갱신과 중단
- 단위와 추정 한계를 포함한 JSON 미리보기·복사
사용 방법
- 정보 읽기를 눌러 현재 화면과 뷰포트 값을 읽고 자동 갱신을 시작합니다.
- 창 크기를 바꾸거나 화면을 회전하고 각 영역의 값을 비교합니다.
- 확대·축소할 때 DPR과 시각 뷰포트 scale이 어떻게 달라지는지 확인합니다.
- 필요하면 갱신을 중단하고 JSON을 검토·복사합니다. 지우기를 누르면 값과 관찰을 모두 정리합니다.
활용 예시
- 반응형 페이지에서 화면 폭과 실제 레이아웃 폭의 차이 확인
- 모바일 핀치 확대와 데스크톱 페이지 줌의 값 비교
- 외부 모니터 이동·OS 배율 변경 뒤 브라우저 보고값 점검
자주 묻는 질문
CSS 픽셀과 장치 픽셀은 어떻게 다른가요?
CSS 픽셀은 웹 레이아웃의 단위입니다. DPR은 현재 환경에서 CSS 픽셀과 장치 픽셀의 비율을 나타냅니다. OS 배율과 페이지 줌의 영향이 있어 화면 CSS 크기에 DPR을 곱한 값은 추정치일 뿐입니다.
추정 픽셀 값이 모니터 제품 사양과 다릅니다.
브라우저가 보고하는 화면 값과 현재 DPR은 실제 패널 해상도와 일치하지 않을 수 있습니다. 디스플레이 설정, 줌, 다중 모니터와 개인정보 보호 정책의 영향을 받습니다. 제품의 네이티브 해상도를 보장하지 않습니다.
화면·사용 가능 영역·레이아웃은 무엇인가요?
화면은 screen.width/height, 사용 가능 영역은 availWidth/availHeight입니다. 레이아웃 innerWidth/innerHeight는 창 내부 크기이며 clientWidth/clientHeight와 스크롤바 등의 차이가 날 수 있습니다. 모든 값은 CSS 픽셀로 표시합니다.
시각 뷰포트는 무엇인가요?
VisualViewport는 사용자가 현재 보고 있는 영역을 나타냅니다. 모바일 핀치 확대나 화면 키보드로 레이아웃 뷰포트와 달라질 수 있습니다. scale은 시각 확대 배율이며 데스크톱 페이지 줌 백분율을 직접 의미하지 않습니다.
값이 언제 갱신되나요?
정보 읽기 후 크기·회전·시각 뷰포트 변경 이벤트와 약 1초 간격 확인으로 갱신합니다. 브라우저가 백그라운드 타이머를 늦출 수 있습니다. 중단·지우기·페이지 이탈 시 이벤트와 타이머를 정리합니다.
모니터 인치나 연결된 모든 화면을 알 수 있나요?
아닙니다. 실제 길이·EDID·전체 디스플레이 목록을 요청하지 않습니다. 현재 페이지에 노출된 화면 정보만 읽으며 회전·시각 뷰포트 등 지원하지 않는 API의 값은 알 수 없음으로 표시합니다.
개인정보 안내
화면 값은 시작 후 현재 페이지에서만 읽고 서버·분석 이벤트·브라우저 저장소에 전송하거나 기록하지 않습니다. 화면 캡처와 다중 화면 권한 요청 없이 동작하며 JSON 복사는 사용자가 누를 때만 수행합니다.
댓글과 질문