Online Tool Store
Тестер Уровня Масштабирования Браузера
Проверяйте реflow при масштабировании 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) | ✓ | ✓ | ✗ |
Быстрый этап проверки перед открытием реальных инструментов разработчика браузера и масштабированием вашей действующей страницы.