내 기기·화면 정보

이 도구가 실제로 보여주는 값

"내 기기·화면 정보"는 지금 접속한 브라우저가 스스로 알고 있는 값을 그대로 읽어 화면에 정리해 줍니다. 대표적으로 모니터 전체 해상도(screen.width × screen.height), 브라우저 창이 실제로 콘텐츠를 그리는 뷰포트 크기(window.innerWidth × innerHeight), 픽셀 밀도 배율(devicePixelRatio), 색상 심도, 브라우저 종류와 버전, 운영체제 힌트를 보여줍니다. 별도 설치나 로그인 없이 페이지를 여는 순간 자바스크립트가 이 값을 읽어 표시하므로, 서버로 아무것도 전송하지 않고 내 기기 안에서만 확인됩니다.

해상도·뷰포트·픽셀배율이 다른 이유

많은 분이 "내 모니터는 1920×1080인데 왜 다른 숫자가 뜨지?"라고 묻습니다. 세 가지 값이 서로 다른 것을 재기 때문입니다. 아래 표를 보면 구분이 쉽습니다.

예를 들어 고해상도 노트북이나 스마트폰은 DPR이 2 또는 3입니다. CSS상 390×844로 보이는 아이폰이 실제 패널은 그 2~3배 픽셀을 씁니다. 또 브라우저 배율을 125%로 키우면 뷰포트 숫자가 줄어드는데, 이는 화면이 고장 난 게 아니라 확대 배율만큼 그려지는 영역이 좁아졌기 때문입니다. 이 도구로 세 값을 한눈에 비교하면 원인을 바로 알 수 있습니다.

이럴 때 쓰면 편합니다

웹사이트나 블로그 스킨을 만들 때 반응형 기준점(브레이크포인트)을 잡으려면 실제 방문 기기의 뷰포트 폭이 필요합니다. 원격 지원을 받을 때 상대에게 "제 해상도는 이거예요"라고 정확히 알려줄 수도 있습니다. 중고 노트북·모니터를 살 때 판매 글의 해상도가 맞는지 즉석에서 검증하거나, 게임·영상 설정을 맞출 때 현재 배율과 색상 심도를 확인하는 용도로도 좋습니다. 캡처한 화면이 흐릿할 때 DPR 값을 보면 고밀도 화면이라 캡처 크기가 커지는 이유도 이해됩니다.

정확하게 읽는 팁

브라우저 확대/축소를 100%로 되돌린 뒤 값을 보면 모니터 원래 해상도와 뷰포트 차이를 깔끔하게 비교할 수 있습니다(단축키 Ctrl+0). 스마트폰에서 세로·가로를 돌리거나 PC에서 창 크기를 바꾸면 브라우저 창(뷰포트) 값이 자동으로 다시 측정되어 갱신됩니다. 스마트폰을 회전하면 브라우저가 알려주는 화면 해상도의 가로·세로도 함께 뒤바뀌는 경우가 많은데, 이때는 화면 해상도 값까지 같이 다시 읽어 표시하므로 두 값이 서로 어긋나지 않습니다. 창을 반만 차지하게 배치하면 뷰포트만 줄고 화면 해상도는 그대로라는 점도 확인해 보세요.