Online Tool Store
Тестер Рівня Масштабування Браузера
Перевіряйте reflow при масштабуванні 50-800% з калькулятором ефективної ширини наживо та виявленням переповнення за нормою WCAG 1.4.10 у 320px.
🔒 Цей інструмент працює повністю у вашому браузері. Ваші файли ніколи не завантажуються на сервер.
Симулює масштабування, змінюючи розмір зразкового макета до тієї самої "ефективної ширини CSS", яку мав би реальний браузер за цього рівня масштабування — близьке наближення, а не справжній рушій рендерингу. Завжди підтверджуйте на своєму сайті реальним масштабуванням браузера.
100%
Ласкаво просимо до нашого магазину
Короткий абзац тексту, щоб побачити, як текст перебудовується та переноситься за зміни симульованого рівня масштабування.
Як користуватися
- Виберіть ширину вікна браузера (1280px відповідає стандартній контрольній точці WCAG 1.4.10).
- Перетягніть повзунок масштабу або натисніть пресет від 50% до 800% — ефективна ширина CSS оновлюється в реальному часі.
- Спостерігайте за значками пройдено/не пройдено: чи досягнуто норматив WCAG у 320px і чи потрібне зразковому макету горизонтальне прокручування за такої ширини.
- Перемкніться в режим "Фіксована ширина (поширена помилка)", щоб побачити, як один елемент фіксованої ширини ламає reflow і провалює перевірку.
- Застосуйте ту саму логіку на власному сайті, а потім перевірте реальним масштабуванням браузера для точного результату.
FAQ
Це справді масштабує мій браузер?
Ні — інструмент змінює розмір зразкового макета до тієї самої "ефективної ширини CSS", яку мав би реальний браузер за такої ширини вікна та рівня масштабування, а потім перевіряє реальне горизонтальне переповнення. Це близьке наближення, а не рушій рендерингу вашого справжнього браузера. Для власного сайту завжди підтверджуйте реальним масштабуванням браузера (Ctrl/Cmd + "+").
Чому WCAG турбується саме про масштаб 400%?
Критерій успіху 1.4.10 (Reflow) WCAG 2.1 вимагає, щоб контент перебудовувався в одну колонку без потреби в горизонтальному прокручуванні за ефективної ширини 320 CSS-пікселів — ширини, яку дає вікно шириною 1280px за масштабу 400%, тому 1280px і 400% є стандартною контрольною точкою.
Що таке "ефективна ширина" і як вона обчислюється?
Ефективна ширина — це ширина вікна браузера, поділена на відсоток масштабу (наприклад, 1280px ÷ 400% = 320px). Вона показує, скільки місця в CSS-пікселях реально має ваш макет після застосування масштабу — те саме число, яке реальний браузер повідомив би вашому CSS.
Які проблеми з макетом зазвичай виникають за великого масштабу?
Контейнери фіксованої ширини, що спричиняють горизонтальне прокручування, елементи навігації, що перекриваються, текст, який виходить за межі контейнера, та обрізані кнопки чи картки — найпоширеніші проблеми, що проявляються лише після перевищення масштабу в 150-200%. Перемкніть інструмент у режим "Фіксована ширина (поширена помилка)", щоб побачити, як саме виглядає цей збій.
Чи справді масштабування стискає область перегляду в CSS-пікселях?
Так. Фізична ширина вікна браузера в CSS-пікселях зменшується зі збільшенням масштабу — це механізм, який симулює цей інструмент, обчислюючи ефективну ширину, і саме тому сторінка, побудована з фіксованою шириною в пікселях, може почати переповнюватися по горизонталі задовго до 400%.
Як ми порівнюємось
| Функція | Online Tool Store | Тестери, орієнтовані на reflow | Інструменти попереднього перегляду пристроїв через URL |
|---|---|---|---|
| Калькулятор ефективної ширини (ширина вікна ÷ масштаб %) | ✓ | ✓ | ✗ |
| Перевірка горизонтального переповнення в реальному часі (пройдено/не пройдено) | ✓ | ✓ | ✗ |
| Пресети масштабу до 800% з reflow у реальному часі | ✓ | ✓ | ✗ |
| Не потребує зовнішнього URL/вбудовування (працює миттєво, без блокувань X-Frame-Options) | ✓ | ✓ | ✗ |
Швидкий етап перевірки перед відкриттям справжніх інструментів розробника браузера та масштабуванням вашої діючої сторінки.