기기 정보

현재 기기의 화면 크기, 픽셀 비율, User-Agent 등의 정보를 확인합니다.

현재 브라우저와 화면의 정보를 보여 줍니다. 화면 크기, 방향, 색 깊이, 픽셀 비율, 창 크기, 브라우저 벤더, 언어, 플랫폼, User-Agent 값을 확인할 수 있습니다.

사용 순서

페이지를 열면 Screen과 Device 카드에 값이 자동으로 채워집니다.
브라우저 창 크기를 바꾸면 Window size 값이 함께 바뀝니다.
다른 모니터나 화면 배율로 옮기면 Pixel ratio와 화면 값을 다시 확인합니다.
값이 unknown으로 나오면 브라우저가 그 정보를 비워 둔 것입니다.

예시

화면의 availWidth가 1440, availHeight가 875이면 Screen size 칸에 1440 x 875가, 픽셀 비율이 2이면 Pixel ratio 칸에 2 dppx가 표시됩니다.

한계

Screen size는 작업 표시줄 같은 영역을 뺀 availWidth와 availHeight를 씁니다. 그래서 모니터의 실제 해상도와 다를 수 있습니다. navigator.platform은 폐기된 속성이라 값이 부정확하거나 비어 있을 수 있습니다. 이 도구는 값을 읽기만 하며 바꾸거나 저장하지 않습니다.

보안 주의

User-Agent, 언어 목록, 화면 크기, 픽셀 비율을 함께 보면 사용자의 기기를 꽤 정확히 구분할 수 있습니다. 스크린샷을 이슈나 문의에 첨부할 때 이 값들이 같이 노출되는지 확인하세요.

배경 지식

브라우저는 window.screen, navigator, devicePixelRatio 같은 객체로 화면과 환경 정보를 노출합니다. 웹 사이트는 반응형 레이아웃이나 이미지 해상도를 고를 때 이 값을 사용합니다. 픽셀 비율은 CSS 픽셀 하나가 물리 픽셀 몇 개에 대응하는지를 뜻하며, 고밀도 화면에서는 2나 3이 흔합니다. 같은 가로 해상도라도 배율이 다르면 글자와 이미지의 선명도가 달라집니다.

이 도구가 보여 주는 값은 모두 자바스크립트에서 읽을 수 있는 정보이므로, 서버도 같은 정보를 얻을 수 있습니다. 디버깅 용도로는 편리하지만, 이 값들의 조합은 기기를 식별하는 지문으로 쓰일 수 있다고 생각하는 것이 맞습니다. 많은 브라우저가 User-Agent를 점점 줄여서 보내므로, 여기 보이는 값이 실제 요청 헤더와 다를 수도 있습니다.

자주 묻는 질문

Window size와 Screen size가 다르게 나오는 이유는 무엇인가요?

Window size는 지금 열려 있는 브라우저 뷰포트의 크기이고, Screen size는 모니터에서 작업에 쓸 수 있는 영역의 크기입니다. 창을 최대화하지 않았다면 두 값의 차이가 큽니다.

unknown이 표시되는 경우는 언제인가요?

값이 비어 있거나 falsy일 때 unknown이 나옵니다. 예를 들어 언어 설정이 비어 있는 환경에서는 Languages 값이 빈 문자열이 되어 unknown으로 보입니다. 값이 없다고 해서 기기에 문제가 있다는 뜻은 아닙니다.

모바일 브라우저에서도 값이 같나요?

같은 항목을 보여 주지만 값은 기기와 브라우저에 따라 다릅니다. 모바일에서는 픽셀 비율이 데스크톱보다 높게 나오는 경우가 많고, 방향 값은 화면을 돌릴 때 바뀝니다. 같은 기기라도 브라우저 종류에 따라 User-Agent 문자열이 달라집니다.