Тестер размера окна просмотра и адаптивных точек перелома

Окно просмотра — это область, в которую отрисовывается веб-страница, — окно браузера за вычетом вкладок, адресной строки и полос прокрутки. Вот почему оно почти всегда меньше разрешения вашего экрана: экран — это вся панель, а окно просмотра — это лишь тот срез, который может использовать страница. Оно измеряется в CSS-пикселях — единицах макета, а не в физических точках: высокоплотные дисплеи 'Retina' вмещают два или три физических пикселя в каждый CSS-пиксель, чтобы текст выглядел чётче, а window.devicePixelRatio сообщает об этом множителе.

Этот инструмент считывает window.innerWidth и window.innerHeight при каждом изменении размера и ориентации, а также окно просмотра макета из documentElement.clientWidth/clientHeight, соотношение пикселей вашего устройства и ориентацию. Точка перелома — это ширина окна просмотра, при которой меняется макет: столбцы складываются, меню сворачивается, меняется размер текста, — а фреймворки вроде Tailwind CSS применяют стили начиная с набора именованных ширин и выше. Приведённая ниже таблица показывает диапазон, в который попадает ваша ширина, а перетаскиваемая тестовая панель показывает, в какую точку перелома попала бы её собственная ширина, — так вы можете предварительно просмотреть компонент, не изменяя размер всего окна. Всё работает локально; ничего не загружается.

Если цифры кажутся неверными, между разрешением вашей панели и окном просмотра, которое видит страница, находится несколько факторов. Интерфейс браузера и полосы прокрутки уменьшают используемую область, а масштабирование страницы сокращает количество CSS-пикселей — поэтому innerWidth уменьшается без изменения размера окна, — как и масштабирование дисплея ОС, из-за чего два одинаковых монитора могут показывать разные размеры. На телефонах мета-тег viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, размещает страницу по ширине устройства вместо имитации рабочего стола шириной ~980px, поэтому окно просмотра шириной 390 px при DPR 3 располагается на панели шириной примерно 1170 физических пикселей. Чтобы увидеть полное физическое разрешение и плотность пикселей вашего экрана, используйте инструменты What Is My Screen Size и Screen Resolution Test.

Распространённые адаптивные точки перелома