monitor 내 화면 해상도는? star

"디바이스 픽셀 비율"이 실제로 측정하는 것

모든 디스플레이는 고정된 물리적 픽셀 격자 — 즉 네이티브 해상도 — 를 가지고 있지만, 웹 페이지는 해상도와 무관한 단위인 CSS 픽셀로 배치됩니다. 디바이스 픽셀 비율(DPR)은 이 둘 사이의 변환 계수입니다: CSS 픽셀 1개가 실제로 몇 개의 물리적 픽셀로 그려지는지를 나타냅니다. 표준 밀도 화면에서는 DPR이 1이며 둘은 일대일로 일치합니다. "레티나"급 또는 고밀도 화면에서는 DPR이 보통 2 또는 3이며, 이는 CSS 픽셀 1개가 실제로는 2×2(물리적 픽셀 4개) 또는 3×3(물리적 픽셀 9개) 블록에 걸쳐 렌더링된다는 뜻입니다. 이런 화면에서 텍스트와 아이콘이 눈에 띄게 더 선명해 보이는 이유가 바로 여기에 있습니다: 운영체제와 브라우저가 같은 논리적 픽셀 하나를 그리는 데 4배 또는 9배 더 많은 물리적 점을 사용할 수 있으므로, 곡선과 가장자리를 그만큼 거칠게 근사할 필요가 없기 때문입니다.

이 페이지는 위 카드에 표시된 모든 값을 실제 브라우저 API에서 직접 읽어옵니다: window.screen은 디스플레이의 네이티브 너비, 높이, 색상 심도를 보고하고, window.devicePixelRatio는 CSS 대 물리적 픽셀 비율을 보고합니다. 브라우저 뷰포트 수치는 window.innerWidth/innerHeight에서 가져오는데, 이 값이 화면 해상도보다 작은 이유가 바로 여기에 있습니다 — 탭, 주소창, 창 테두리가 차지하는 공간이 제외되기 때문입니다. 창 크기를 조절하면 이 수치들은 실시간으로 갱신됩니다. 캐시된 값이 아니라 브라우저에서 직접 읽어오기 때문입니다.

이 정보가 유용하게 쓰이는 상황

대표적인 활용 사례로는 기술 지원팀에 숫자를 추측하지 않고 정확한 환경을 설명하는 경우, 반응형 디자인이 사용자 기기에서 실제로 다뤄야 할 픽셀 크기를 확인하는 경우, 새로 연결한 모니터가 더 낮은 대체 모드가 아니라 네이티브 해상도로 정상 협상되었는지 확인하는 경우, 또는 두 번째 디스플레이로 연결한 TV가 올바른 신호를 받았는지 검증하는 경우가 있습니다. 클릭 한 번으로 복사하는 버튼은 모든 값의 깔끔한 텍스트 요약본을 가져와, 지원 티켓이나 버그 리포트에 바로 붙여 넣을 수 있게 해줍니다.

카드에 함께 표시되는 색상 심도는 픽셀 비율과 비슷하게 채널별 원리로 작동합니다: 일반적인 24비트 디스플레이는 빨강, 초록, 파랑에 각각 8비트씩 할당해 픽셀당 약 1,670만 가지 색을 표현하며, 일부 전문가용 및 HDR 디스플레이는 더 세밀한 그러데이션을 위해 30비트 또는 36비트 심도를 보고합니다. 화면 방향(세로 또는 가로)과 터치 지원 여부도 화면을 완성하는 요소로, 두 값 모두 화면 크기나 사용자 에이전트 추정이 아니라 동일한 window.screen 및 navigator 인터페이스에서 실시간으로 읽어옵니다.