화면 및 뷰포트 해상도 감지, 반응형 중단점 테스트 및 실시간 크기 조정 업데이트 지원
실용 도구
이 도구 정보
화면 해상도 감지 도구는 화면 해상도, 뷰포트 크기, 기기 픽셀 비율, 사용 가능한 화면 영역, 방향 및 반응형 중단점을 즉시 표시합니다. 브라우저 창 크기를 조정할 때 모든 정보가 실시간으로 업데이트됩니다.
주요 기능
- 화면 해상도 및 뷰포트 크기 즉시 감지
- 기기 픽셀 비율 및 사용 가능한 화면 영역 표시
- 현재 방향 표시 (가로 또는 세로)
- 반응형 중단점 표시기 (XS, SM, MD, LG, XL, XXL)
- 브라우저 창 크기 조정 시 실시간 업데이트
- 설치 불필요, 완전히 브라우저에서 실행
사용 사례
- 웹 개발을 위한 화면 해상도 및 뷰포트 크기 확인
- 현재 레이아웃에 해당하는 반응형 중단점 확인
- 다양한 창 크기에서 웹사이트의 반응형 효과 테스트
- 고 DPI 디스플레이 테스트를 위한 기기 픽셀 비율 식별
- 반응형 디자인 작업 중 화면 방향 빠르게 확인
screen
resolution
viewport
자주 묻는 질문
화면 해상도 감지 도구는 어떤 정보를 표시하나요?
이 도구는 화면 해상도, 뷰포트 크기, 기기 픽셀 비율, 사용 가능한 화면 영역, 현재 방향(가로 또는 세로) 및 뷰포트가 속한 반응형 중단점을 표시합니다.
화면 해상도와 뷰포트 크기의 차이점은 무엇인가요?
화면 해상도는 디스플레이의 물리적 픽셀 크기입니다(예: 1920x1080). 뷰포트 크기는 보이는 브라우저 창 영역으로, 일반적으로 브라우저 인터페이스, 작업 표시줄 및 확대/축소 설정으로 인해 전체 화면보다 작습니다.
기기 픽셀 비율이란 무엇인가요?
기기 픽셀 비율(DPR)은 물리적 화면 픽셀과 CSS 픽셀의 비율입니다. DPR이 2라는 것은 각 CSS 픽셀이 2x2 물리적 픽셀을 사용함을 의미하며, Retina 및 고 DPI 디스플레이에서 일반적입니다. 이는 이미지 렌더링과 반응형 디자인에 영향을 미칩니다.
반응형 중단점을 어떻게 테스트하나요?
도구는 현재 뷰포트 너비와 높이를 실시간으로 표시합니다. 브라우저 창 크기를 조정하여 크기 변화를 확인할 수 있습니다. 이는 다양한 창 크기에서 어떤 CSS 중단점이 활성화되는지 식별하는 데 도움이 됩니다.
화면 방향을 감지할 수 있나요?
네. 도구는 화면이 세로인지 가로인지 표시하며, 이는 모바일 기기나 회전된 모니터에서 반응형 레이아웃을 테스트할 때 특히 유용합니다.