Тестер розміру вікна перегляду та адаптивних точок перелому

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

Цей інструмент зчитує window.innerWidth і window.innerHeight при кожній зміні розміру та орієнтації, а також вікно перегляду макета за documentElement.clientWidth/clientHeight, співвідношення пікселів вашого пристрою та орієнтацію. Адаптивна точка перелому — це ширина вікна перегляду, на якій змінюється макет — стовпці складаються, меню згортається, змінюється розмір шрифту — і фреймворки, такі як Tailwind CSS, застосовують стилі від набору іменованих ширин і вище. Наведена нижче довідкова таблиця виділяє діапазон, у який потрапляє ваша ширина, а перетягувана тестова панель показує точку перелому, якої досягла б її власна ширина, тож ви можете переглядати компонент без зміни розміру всього вікна. Усе працює локально; нічого не завантажується.

Якщо цифри виглядають неправильно, між роздільною здатністю вашої панелі та вікном перегляду, яке бачить сторінка, є кілька факторів. Елементи інтерфейсу браузера та смуги прокрутки віднімаються від корисної області, а масштабування сторінки зменшує кількість CSS-пікселів — тому innerWidth зменшується без переміщення вікна — так само як і масштабування дисплея ОС, тому два однакові монітори можуть показувати різні розміри. На телефонах тег meta 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.

Поширені адаптивні точки перелому