Проверка адаптивной вёрстки сайта на разных разрешениях экрана
Этот онлайн-инструмент показывает, как сайт выглядит на телефонах, планшетах и ноутбуках, — все экраны рядом в одном окне браузера. Не нужно по очереди менять размер окна или переключать устройства в инструментах разработчика: введите адрес, и страница откроется сразу во всех выбранных разрешениях.
Сервис бесплатный, работает без регистрации и установки. Подойдёт верстальщикам, дизайнерам, тестировщикам и владельцам сайтов, которым нужно быстро проверить мобильную версию перед публикацией.
Как проверить адаптивность сайта
- Введите адрес сайта в поле вверху страницы и нажмите «Открыть».
- Отметьте в списке слева нужные устройства или добавьте своё разрешение — ширину и высоту в пикселях.
- Сайт показывается в реальном размере, один к одному. Кнопка «Компактно» скрывает список устройств и уменьшает отступы, чтобы на экране поместилось больше окон.
- Прокрутите страницу в каждом окне и проверьте меню, шрифты, картинки, таблицы и формы. Кнопка ⟳ поворачивает экран в альбомную ориентацию.
Какие разрешения экранов можно проверить
В инструменте 16 готовых размеров. Это CSS-вьюпорты — именно по ним срабатывают медиазапросы @media, а не физические пиксели экрана.
| Тип устройства | Примеры | Ширина экрана |
|---|---|---|
| Небольшие телефоны | iPhone SE, компактные Android | 320–375 px |
| Современные смартфоны | iPhone 13–16, Galaxy S24, Pixel 8 | 360–440 px |
| Планшеты | iPad mini, iPad Air, iPad Pro 12.9" | 744–1024 px |
| Ноутбуки | MacBook Air 13", MacBook Pro 14", ноутбуки HD | 1280–1536 px |
| Мониторы | Full HD | 1920 px |
На что смотреть при проверке мобильной версии
- Горизонтальная прокрутка. Страница не должна уезжать вбок: чаще всего её ломают широкие таблицы, картинки без
max-widthи длинные слова. - Размер текста и кнопок. Основной текст — от 16 px, кнопки и ссылки — не меньше 44×44 px, чтобы по ним легко попадать пальцем.
- Меню и шапка. Навигация должна сворачиваться и не закрывать собой контент.
- Формы. Поля помещаются по ширине экрана, подписи не обрезаются.
- Точки перелома. Проверьте размеры на границах медиазапросов — например 767 и 768 px: именно там вёрстка ломается чаще всего.
Зачем сайту адаптивная вёрстка
Больше половины посетителей приходят на сайты с телефонов. Google индексирует в первую очередь мобильную версию страницы, а Яндекс учитывает удобство сайта на смартфонах при ранжировании в мобильной выдаче. Если на маленьком экране текст мелкий, а кнопки не нажимаются, люди уходят, а позиции в поиске падают.
Частые вопросы
Как проверить адаптивность сайта онлайн?
Введите адрес сайта в поле вверху страницы и нажмите «Открыть». Сайт загрузится сразу в нескольких окнах с размерами экранов телефонов, планшетов и ноутбуков. Набор устройств выбирается в списке слева.
Почему вместо сайта пустое окно?
Сайт запрещает показ внутри других страниц с помощью заголовка X-Frame-Options или директивы CSP frame-ancestors. На своём сайте этот заголовок можно временно отключить на время проверки.
На каких разрешениях нужно проверять сайт?
Минимальный набор: 320–375 px для небольших телефонов, 390–440 px для современных смартфонов, 744–1024 px для планшетов, 1280–1536 px для ноутбуков и 1920 px для мониторов Full HD.
Можно ли проверить сайт на localhost?
Локальный сайт можно проверить, если сохранить страницу инструмента на компьютер и открыть её как файл. С опубликованной в интернете версии браузер обычно не даёт открыть localhost.
Чем инструмент отличается от настоящего телефона?
Инструмент меняет только размер окна, поэтому проверяются медиазапросы и резиновая вёрстка. User-Agent, сенсорные события и особенности мобильных браузеров не эмулируются, так что финальную проверку стоит сделать на реальном устройстве.