Тестер размера окна просмотра и адаптивных точек перелома
Узнайте, насколько большим на самом деле является ваше окно браузера с точки зрения веб-страницы. Этот инструмент считывает ширину и высоту окна просмотра в CSS-пикселях, соотношение физических и 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× |
Похожие инструменты
Что такое окно просмотра (viewport)
Окно просмотра — это видимая область, в которой веб-страница может отображать контент: содержательная часть окна браузера, не считая вкладок, адресной строки и панели закладок. Именно поэтому оно почти всегда меньше разрешения вашего экрана: экран — это вся панель целиком, а окно просмотра — лишь та часть, которую страница может использовать. window.innerWidth и window.innerHeight сообщают эту область в CSS-пикселях, а documentElement.clientWidth/clientHeight сообщают область просмотра макета (та же область за вычетом ширины классической полосы прокрутки, если она присутствует). Поскольку окно просмотра меняется мгновенно при изменении размера, разделении экрана или повороте устройства, именно на этот параметр реально реагируют адаптивные макеты.
CSS-пиксели против физических пикселей и devicePixelRatio
CSS-пиксель — это единица макета, а не физическая точка на панели. На стандартном дисплее один CSS-пиксель соответствует одному физическому пикселю, но экраны высокой плотности 'Retina' упаковывают два или три физических пикселя в каждый CSS-пиксель, благодаря чему текст выглядит чётче. window.devicePixelRatio сообщает этот множитель: значение 2 означает, что окно просмотра шириной 1440 CSS-пикселей отрисовывается с использованием 2880 физических пикселей. Веб-страницы верстаются в CSS-пикселях, поэтому телефон, сообщающий об окне просмотра шириной 390 пикселей с DPR, равным 3, имеет физическую панель шириной примерно 1170 пикселей. Чтобы увидеть полное физическое разрешение и плотность пикселей вашего экрана, используйте инструменты What Is My Screen Size и Screen Resolution Test.
Адаптивные точки перелома
Точка перелома — это ширина окна просмотра, при которой меняется макет: колонки складываются в одну, меню сворачивается, изменяется размер шрифта. CSS-медиазапросы и utility-фреймворки, такие как Tailwind CSS, определяют небольшой набор именованных ширин и применяют стили начиная с этой ширины и выше. Значения по умолчанию в Tailwind: sm — 640px, md — 768px, lg — 1024px, xl — 1280px и 2xl — 1536px; ниже 640px вы находитесь в базовом диапазоне без префикса. Таблица ниже подсвечивает активный диапазон по мере изменения размера окна, а перетаскиваемая тестовая панель сообщает, в какую точку перелома попала бы её собственная ширина — быстрый способ увидеть, как компонент ведёт себя при разных размерах, не меняя размер всего окна.
Почему innerWidth отличается от ширины экрана
Между разрешением вашей панели и окном просмотра, которое видит страница, находится несколько факторов. Элементы интерфейса браузера (вкладки, панели инструментов и видимая полоса прокрутки) уменьшают доступную область. Масштаб страницы тоже влияет на это: увеличение масштаба уменьшает количество умещающихся CSS-пикселей, поэтому innerWidth уменьшается, даже если размер окна не менялся, а также немного изменяет devicePixelRatio. На мобильных устройствах мета-тег viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — указывает браузеру задать окно просмотра макета равным ширине устройства, вместо того чтобы притворяться настольным браузером шириной около 980px, поэтому адаптивным сайтам он необходим. Масштабирование дисплея на уровне операционной системы также меняет количество CSS-пикселей, поэтому два одинаковых монитора могут сообщать разные размеры окна просмотра.