내 화면 해상도 확인

1920 x 1080 화면의 화면 비율은 16:9이고 약 2.1메가픽셀입니다. 1440 x 900 화면에서 기기 픽셀 비율이 2라면 기기 픽셀은 2880 x 1800입니다.

문제가 해결됐나요?

사용 방법

화면 크기는 screen.width x screen.height이고 CSS 픽셀 단위입니다. 브라우저 뷰포트는 window.innerWidth x window.innerHeight로, 웹 페이지가 쓸 수 있는 영역입니다.

물리 해상도는 추정값입니다. 화면 크기에 window.devicePixelRatio를 곱해 반올림합니다. 픽셀 비율이 2인 디스플레이에서 CSS 크기 1440 x 900 화면은 2880 x 1800 기기 픽셀로 표시됩니다.

화면 비율은 16:9, 16:10 같은 흔한 비율과 0.5퍼센트 이내로 맞으면 그 비율로 보여 주고, 아니면 약분한 정확한 비율을 보여 줍니다.

웹 페이지는 화면이 달라도 글자가 비슷한 크기로 보이도록 CSS 픽셀로 배치됩니다. 고밀도 디스플레이는 CSS 픽셀 하나에 기기 픽셀을 여러 개 담는데, 기기 픽셀 비율이 그 개수입니다.

운영체제의 화면 배율과 브라우저 확대 모두 이 비율을 바꾸기 때문에, 같은 모니터라도 환경에 따라 다른 값이 나올 수 있습니다.

모니터 사양보다 낮은 해상도가 나오는 이유가 뭔가요?

브라우저는 CSS 픽셀 기준으로 크기를 알려 줍니다. 운영체제에서 화면 배율을 150퍼센트처럼 키워 두면 CSS 픽셀 1개가 기기 픽셀 여러 개를 덮습니다. 추정 물리 해상도는 픽셀 비율을 곱해 그만큼을 되돌린 값입니다.

페이지를 확대하면 숫자가 바뀌어요.

데스크톱 브라우저 대부분은 페이지 확대 시 기기 픽셀 비율과 뷰포트 값이 달라집니다. 확대를 100퍼센트로 되돌리면 평소 값을 읽을 수 있습니다.

화면 크기와 뷰포트는 뭐가 다른가요?

화면 크기는 디스플레이 전체입니다. 뷰포트는 브라우저 창 안에서 페이지가 그려지는 부분만이고, 도구 모음이나 탭, 바깥 스크롤바는 빠집니다.

물리 해상도는 항상 정확한가요?

아니요. 브라우저가 알려 주는 값으로 계산하기 때문에 반올림으로 1픽셀 어긋나거나, 브라우저나 시스템이 공개하지 않는 배율을 쓰면 다르게 나올 수 있습니다. 정확한 기본 해상도는 디스플레이 설정에서 확인하세요.