뷰포트 크기 및 반응형 브레이크포인트 테스터
브라우저 창이 웹페이지에 얼마나 큰지 확인해 보세요. 이 도구는 뷰포트 크기(CSS 픽셀), 기기 픽셀 비율과 화면 방향, 그리고 현재 위치하는 반응형 브레이크포인트를 읽어내며, 크기를 조절할 때마다 실시간으로 업데이트됩니다.
브라우저 창의 크기를 조절하면 아래 값들이 실시간으로 업데이트되는 것을 확인하세요.
Tailwind CSS 브레이크포인트
창 크기를 조절하면 현재 뷰포트가 속한 범위가 강조 표시됩니다.
| 접두사 | 최소 너비 | 적용 시작 지점 |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
기기 카테고리
크기 조절 가능한 테스트 패널
오른쪽 아래 모서리를 드래그해 이 패널의 크기를 조절하세요. 자신의 크기와 그 너비가 어떤 브레이크포인트에 해당하는지 알려주는 간단한 반응형 측정 도구입니다.
일반적인 기기별 뷰포트 크기
참고용 대략적인 세로 모드 CSS 픽셀 뷰포트입니다. 실제 값은 브라우저와 운영체제에 따라 다를 수 있습니다.
| 기기 | 뷰포트 (CSS px) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
뷰포트는 웹페이지가 그려야 하는 영역으로, 탭, 주소 표시줄, 스크롤바를 제외한 브라우저 창입니다. 그래서 거의 항상 화면 해상도보다 작습니다: 화면은 전체 패널이고, 뷰포트는 페이지가 사용할 수 있는 슬라이스일 뿐입니다. 이는 물리적 점이 아닌 CSS 픽셀, 레이아웃 단위로 측정됩니다 — 고밀도 'Retina' 디스플레이는 각 CSS 픽셀에 두세 개의 물리적 픽셀을 넣어 텍스트가 더 선명하게 보이고, window.devicePixelRatio는 그 배수를 보고합니다.
이 도구는 크기와 방향 변경 시 window.innerWidth와 window.innerHeight를 읽고, documentElement.clientWidth/clientHeight의 레이아웃 뷰포트, 기기 픽셀 비율, 화면 방향도 함께 읽습니다. 브레이크포인트는 레이아웃이 변하는 뷰포트 너비로, 열이 쌓이고, 메뉴가 접히고, 타입 크기가 조정되며, Tailwind CSS와 같은 프레임워크는 이름 있는 폭 집합부터 스타일을 적용합니다. 아래 참고 자료는 너비가 해당하는 범위를 강조하고, 드래그 가능한 테스트 패널은 자신의 폭이 도달하는 브레이크포인트를 알려줘서 전체 창을 바꾸지 않고도 컴포넌트를 미리 볼 수 있습니다. 모든 것이 로컬에서 운영됩니다; 아무것도 업로드되지 않습니다.
숫자가 이상해 보인다면, 패널의 해상도와 페이지가 보는 뷰포트 사이에 여러 가지가 있습니다. 브라우저 크롬과 스크롤바는 사용 가능한 영역을 줄이고, 페이지 줌은 CSS 픽셀 수를 줄여 창이 움직이지 않아도 innerWidth가 줄어들고, OS 디스플레이 스케일링도 마찬가지입니다. 그래서 동일한 모니터 두 대가 서로 다른 크기를 보고할 수 있습니다. 휴대폰에서는 메타 뷰포트 태그(<meta name="viewport" content="width=device-width, initial-scale=1">)가 ~980px 데스크톱을 흉내 내는 대신 기기 폭으로 페이지를 배치합니다. 즉, DPR 3의 390px 뷰포트는 약 1170개의 물리적 픽셀 폭을 가진 패널에 위치합니다. 화면의 전체 물리적 해상도와 픽셀 밀도를 확인하려면 What Is My Screen Size와 Screen Resolution Test 도구를 사용하세요.
일반적인 반응형 브레이크포인트
| 브레이크포인트 | 최소 폭 | 그 범위의 일반적인 기기들 |
|---|---|---|
| base | 0px | 세로형 휴대폰 (~360–430 CSS px 폭) |
| sm | 640px | 가로형 대형 휴대폰, 작은 태블릿 |
| md | 768px | 세로형 태블릿 (아이패드는 768px로 보고) |
| lg | 1024px | 가로형 태블릿, 작은 노트북 |
| xl | 1280px | 노트북과 표준 데스크톱 창 |
| 2xl | 1536px | 대형 및 고해상도 데스크톱 모니터 |