화면 해상도 도구란?
화면 해상도 도구는 현재 화면 크기, 픽셀 밀도, 장치 픽셀 비율, 뷰포트 크기를 감지하여 표시합니다. 이 정보는 반응형 디자인을 테스트하는 웹 개발자, 올바른 해상도로 에셋을 만드는 디자이너, 디스플레이 문제를 해결하거나 모니터 설정을 선택하는 사용자에게 필수적입니다.
사용 방법
- 화면을 측정하려는 장치에서 이 페이지를 엽니다.
- 화면 해상도(너비 × 높이, 픽셀), 장치 픽셀 비율(DPR), 뷰포트 크기, 색 심도를 확인합니다.
- 브라우저 창의 크기를 조절하여 뷰포트 크기가 실시간으로 업데이트되는 것을 확인합니다. 반응형 중단점 테스트에 유용합니다.
주요 개념
화면 해상도는 디스플레이가 표시할 수 있는 총 픽셀 수로, 너비 × 높이(예: 1920×1080)로 표현됩니다. 장치 픽셀 비율(DPR)은 하나의 CSS 픽셀에 해당하는 물리적 픽셀 수를 나타냅니다. Retina 디스플레이는 일반적으로 DPR이 2 또는 3입니다. 뷰포트는 브라우저 창의 가시 영역으로, 도구 모음, 작업 표시줄, 브라우저 크롬으로 인해 화면 해상도보다 작을 수 있습니다.
자주 묻는 질문
화면 해상도와 뷰포트 크기의 차이는 무엇인가요?
화면 해상도는 물리적 디스플레이의 총 픽셀 수입니다. 뷰포트 크기는 도구 모음, 스크롤바, 브라우저 프레임을 제외한 브라우저 내에서 웹 콘텐츠를 렌더링할 수 있는 영역입니다. 반응형 CSS 미디어 쿼리는 화면 해상도가 아닌 뷰포트를 대상으로 합니다.
장치 픽셀 비율이란 무엇인가요?
장치 픽셀 비율(DPR)은 물리적 픽셀과 CSS 픽셀의 비율입니다. DPR이 2이면 각 CSS 픽셀이 2×2 물리적 픽셀 격자를 사용하여 렌더링되어 Apple Retina 디스플레이와 같은 고DPI 화면에서 더 선명한 텍스트와 이미지를 생성합니다.
보고된 해상도가 모니터 사양과 다른 이유는 무엇인가요?
운영 체제 디스플레이 스케일링이 유효 해상도를 줄일 수 있습니다. 예를 들어, 200% 스케일링의 4K 모니터(3840×2160)는 물리적 패널의 픽셀이 4배 더 많음에도 불구하고 브라우저에 1920×1080 CSS 픽셀로 보고됩니다.