WAVESPEED AI ТЕСТ АДАПТИВНОСТИ Ваш код остаётся на устройстве

100% БЕСПЛАТНО

Бесплатная проверка адаптивного дизайнаСмотрите страницу во всех размерах экрана сразу.

Введите адрес сайта или вставьте HTML и смотрите его в рамках размером с настоящие экраны телефонов, планшетов, ноутбуков и мониторов — рядом или по одному.
Растягивайте рамку до любой ширины, поворачивайте её, переключайтесь между популярными брейкпоинтами, находите контент, вылезающий вбок, и сохраняйте скриншоты своего HTML.

40+ размеров экранаВид рядомПоиск переполнения

Без регистрации Без прокси Без водяных знаков

Загрузка теста…

Вставленный HTML остаётся в браузере. Сайты загружаются напрямую со своих серверов.

ТРИ ПРОСТЫХ ШАГА

Как проверить адаптивный дизайн

Добавьте страницу

Введите адрес сайта или переключитесь на HTML и вставьте код либо откройте файл .html. Пример страницы показывает, как всё работает.

Выберите экраны

Смотрите на одно устройство и тяните его края или поставьте рядом телефон, планшет, ноутбук и монитор. Любое из них можно повернуть.

Исправьте и сохраните

Прочитайте предупреждения о контенте шире экрана, правьте HTML и смотрите, как обновляется каждая рамка, затем сохраните скриншоты.

Советы для макетов, которые держатся на любом размере

Начинайте с 320 пикселей

Самые узкие используемые телефоны имеют ширину от 320 до 360 CSS-пикселей. Если макет держится там, он держится почти везде.

Тяните, а не только выбирайте устройства

Макет ломается и между устройствами. Медленно тяните рамку от узкой к широкой и ловите момент, когда что-то прыгает или перекрывается.

Не забывайте тег viewport

Без <meta name="viewport" content="width=device-width, initial-scale=1"> телефоны верстают страницу шириной около 980 пикселей и уменьшают её, пока текст не станет крошечным.

WaveSpeed AI

От макета к визуалу

Когда страница работает на любом размере, создайте для неё изображения и ролики с WaveSpeed AI.

Начать создавать Изучите 1000+ ИИ-моделей

Более 1000 ИИ-моделей
Изображения, видео и 3D
Оплата по факту

$1 бесплатных кредитов для подходящих новых аккаунтов. Карта не нужна. Для генераторов нужны отдельный аккаунт и кредиты. Инструмент «Тест адаптивности» бесплатный.

Вопросы о тесте адаптивности

Этот тест адаптивного дизайна бесплатный?

Да. Без аккаунта, без ограничений на устройства и страницы, без водяного знака на скриншотах и без установки: всё работает в браузере.

Как проверить сайт на разных размерах экрана?

Введите адрес сайта или вставьте HTML, затем выберите из более чем 40 размеров телефонов, планшетов, ноутбуков и мониторов — по одному или рядом. Растягивайте рамку до любой ширины, поворачивайте её или переходите к популярным брейкпоинтам.

Насколько точны размеры устройств?

Каждая рамка — это viewport браузера с точной шириной и высотой экрана в CSS-пикселях, поэтому медиазапросы, макеты и брейкпоинты реагируют так же, как на этом устройстве.

Можно ли проверить свой HTML или локальный сайт?

Да. Вставьте HTML или откройте файл .html, чтобы смотреть его во всех размерах и редактировать вживую. Сайты загружаются по https; для локального сервера разработки используйте https-туннель или вставьте собранный HTML.

Находит ли он проблемы макета?

Да. В вашем HTML он отмечает элементы шире экрана — обычную причину горизонтальной прокрутки на телефонах — и предупреждает, если нет метатега viewport.

Можно ли сохранять скриншоты?

Да, для вставленного HTML: сохраняйте видимую область или всю страницу в PNG с плотностью пикселей устройства, так что рамка шириной 393 пикселя при 3x даёт изображение шириной 1179 пикселей.

Что означает метка плотности пикселей?

Телефоны вмещают от двух до четырёх физических пикселей в каждый CSS-пиксель. Метка показывает это соотношение, и скриншоты вставленного HTML сохраняются с ним, поэтому их чёткость совпадает с настоящим экраном.

Проходит ли моя страница через ваши серверы?

Нет. Сайт загружается вашим браузером прямо со своего сервера внутри рамок, без прокси. Вставленный HTML и скриншоты остаются в браузере; последняя страница и настройки хранятся в хранилище этого браузера.

Почему сайт остаётся пустым?

Некоторые сайты запрещают показывать себя внутри других страниц. Откройте «Почему пусто?», чтобы проверить заголовки сайта, или вставьте HTML страницы.

Все бесплатные инструменты