장치 픽셀 비율이란?

장치 픽셀 비율(DPR)은 물리적 픽셀과 CSS 픽셀의 비율입니다. DPR 2는 각 CSS 픽셀이 2x2 물리적 픽셀로 렌더링됨을 의미합니다(Retina/HiDPI 디스플레이).

뷰포트가 화면보다 작은 이유는?

뷰포트는 도구 모음, 스크롤바, 작업 표시줄을 제외한 브라우저의 콘텐츠 영역입니다. 전체 화면 모드(F11)가 뷰포트를 최대화합니다.

색 심도(픽셀당 비트)는 디스플레이가 표시할 수 있는 색상 수를 결정합니다. 24비트는 1670만 색상을 의미합니다(RGB 채널당 8비트).

아닙니다. 모든 값은 표준 브라우저 API(window.screen, devicePixelRatio)에서 가져옵니다. 전송되거나 저장되지 않습니다.

화면 해상도, 브라우저 뷰포트 크기, 장치 픽셀 비율(DPI), 색 심도, 방향 — 브라우저에서 즉시 감지됩니다.

이 도구는 window.screen과 devicePixelRatio를 읽어 디스플레이의 물리적 해상도, 뷰포트 크기, 픽셀 밀도, 색 심도, 방향을 보고합니다.

장치 픽셀 비율 2는 각 CSS 픽셀이 2x2 물리적 픽셀을 사용한다는 의미입니다(Retina/HiDPI). 24비트 색 심도는 1670만 색상을 제공합니다.

결과	범위	의미
감지됨	해상도, DPR, 색 심도 표시	브라우저가 모든 디스플레이 속성을 성공적으로 보고합니다. DPR 1x는 표준, 2x는 Retina/HiDPI, 3x는 고급 모바일 화면에서 볼 수 있습니다.
제한적	뷰포트가 화면 해상도보다 크게 다름	브라우저 도구 모음, 작업 표시줄 또는 배율 설정이 사용 가능한 뷰포트를 줄입니다. F11을 눌러 전체 화면으로 사용 가능한 공간을 최대화하세요.
미지원	일부 속성이 0 또는 undefined 반환	최신 브라우저에서는 드문 경우입니다. 화면 API 접근을 제한하는 헤드리스 또는 임베디드 컨텍스트가 아닌지 확인하세요.

화면 해상도가 예상보다 낮게 표시됨

OS 디스플레이 설정에서 배율을 확인하세요. 1920x1080 디스플레이에서 150% 배율일 경우, 브라우저는 DPR 1.5의 1280x720 CSS 픽셀로 보고합니다.

색 심도가 30비트 대신 24비트로 표시됨

30비트(채널당 10비트)는 호환되는 GPU, 디스플레이, 드라이버 구성이 필요합니다. 대부분의 일반 디스플레이는 1670만 색상을 제공하는 24비트(채널당 8비트)를 사용합니다.