Тест адаптивного сайта (вид на телефоне, планшете и компьютере)
Введите адрес сайта и выберите экраны. Каждый фрейм имеет реальную ширину устройства, уменьшенную, чтобы поместиться здесь.
Как пользоватьсяВаш сайт сразу на нескольких экранах
Доступно на: 
Тест адаптивного сайта (вид на телефоне, планшете и компьютере): для чего нужен
Перед публикацией проверьте, как сайт работает на экранах всех размеров. Введите адрес и смотрите сайт рядом на маленьком телефоне (360 px), iPhone SE (375 px), iPhone 15 (393 px), планшете (768 px), ноутбуке (1366 px) и Full HD (1920 px): у каждого реальная ширина, уменьшенная до размера экрана.
Поверните в альбомную ориентацию, задайте свою ширину и перезагрузите все фреймы сразу. Работает с вашим localhost и с сайтами, которые разрешают открытие внутри другого; те, что блокируют это из соображений безопасности (X-Frame-Options), отображаются пустыми, и страница объясняет причину.
Как пользоваться
- Введите адрес сайта.
- Выберите экраны и масштаб.
- Прокручивайте фреймы и проверяйте вёрстку.
Когда использовать
- Проверка сайта перед публикацией.
- Показать клиенту, как он выглядит на телефоне.
- Тестирование media queries.
Частые вопросы
Почему некоторые сайты отображаются пустыми?
Многие сайты (Google, Instagram, банки) отправляют защитный заголовок (X-Frame-Options или frame-ancestors), запрещающий отображение внутри другого сайта, чтобы предотвратить кликджекинг. Ваш собственный сайт обычно работает; если нет, значит, у него тоже есть такая защита, и это хорошо.
Это то же самое, что смотреть на настоящем телефоне?
Ширина та же, поэтому вёрстка, media queries и переносы строк совпадают. Отличаются тип касания, системный шрифт и плотность пикселей.
Можно ли протестировать сайт, который пока только на моём компьютере?
Можно. Введите локальный адрес, например http://localhost:3000.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.