Тестер розміру вікна перегляду та адаптивних точок перелому
Дізнайтеся, наскільки великим насправді є ваше вікно браузера для веб-сторінки. Цей інструмент зчитує ширину та висоту вашого вікна перегляду в пікселях 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 та фреймворки утиліт, такі як Tailwind CSS, визначають невеликий набір іменованих ширин і застосовують стилі від цієї ширини й вище. Значення за замовчуванням у Tailwind: sm — 640px, md — 768px, lg — 1024px, xl — 1280px і 2xl — 1536px; нижче 640px ви перебуваєте в базовому діапазоні без префікса. Нижче наведена таблиця виділяє активний діапазон під час зміни розміру, а панель тестування, розмір якої можна змінювати, повідомляє, яку точку перелому вразила б її власна ширина — швидкий спосіб переглянути, як компонент поводиться при різних розмірах, не змінюючи все вікно.
Чому innerWidth відрізняється від ширини екрана
Між роздільною здатністю вашої панелі та вікном перегляду, яке бачить сторінка, стоїть кілька факторів. Елементи інтерфейсу браузера (вкладки, панелі інструментів і видима смуга прокрутки) віднімаються від корисної області. Масштабування сторінки також змінює його: збільшення масштабу зменшує кількість пікселів CSS, що вміщуються, тому innerWidth зменшується, навіть якщо вікно не переміщувалося, і це також трохи змінює devicePixelRatio. На мобільних пристроях тег meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — вказує браузеру встановити вікно перегляду макета рівним ширині пристрою замість того, щоб вдавати з себе настільний комп'ютер шириною близько 980px, тому адаптивним сайтам він потрібен. Масштабування дисплея операційною системою також змінює кількість пікселів CSS, тому два однакові монітори можуть повідомляти про різні розміри вікна перегляду.