Responsive Viewer отображает текущую веб-страницу сразу в нескольких размерах viewport — все на одном экране. Смотрите, как ваш дизайн выглядит на iPhone, iPad, Android-телефонах, ноутбуках и десктопах одновременно. Прокрутите один viewport — все остальные прокрутятся вместе с ним, что упрощает сравнение одного и того же раздела контента на устройствах любого размера.
Традиционное тестирование адаптивных дизайнов предполагает изменение размера окна браузера или переключение между размерами viewport по одному с помощью панели устройств в DevTools. Это работает, но одновременно виден только один размер — невозможно сравнить, как раздел выглядит на мобильном устройстве и на десктопе. Responsive Viewer решает эту проблему, отображая страницу сразу в нескольких viewport бок о бок на экране. Выберите из готовых профилей устройств (iPhone 15, iPad Pro, Pixel 8, MacBook, десктоп 1440p) или задайте собственные размеры. Каждый viewport — это полноценная отрисовка страницы, а не статический скриншот: прокрутите один — все остальные перейдут на ту же позицию. Эта синхронизированная прокрутка позволяет мгновенно сравнить одну и ту же область контента на всех размерах устройств. Это самый быстрый способ обнаружить проблемы адаптивности: навигация, которая некорректно переносится; изображения, выходящие за пределы контейнеров; текст, нечитаемый на маленьких экранах; или отступы, которые неудобно сжимаются.
Смотрите, как текущая страница отрисовывается одновременно в нескольких размерах viewport, отображаемых бок о бок на экране. Сравнивайте макеты для мобильных устройств, планшетов и десктопов с первого взгляда, не переключаясь между видами. Каждый viewport — это полноценная отрисовка страницы.
Выбирайте из библиотеки популярных пресетов устройств: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) и Full HD Desktop (1920×1080). Пресеты обновляются с учётом актуальных размеров устройств.
Введите любую ширину и высоту для тестирования нестандартных размеров viewport. Нужно проверить, как страница выглядит при ширине ровно 768px (распространённая точка перелома для планшетов)? Просто введите значение. Несколько произвольных viewport можно добавить вместе с пресетами.
Прокрутите один viewport — все остальные прокрутятся на ту же вертикальную позицию. Это позволяет одновременно сравнивать один и тот же раздел контента на всех размерах устройств — смотрите, как hero-область, таблица цен или футер отображаются на мобильных устройствах, планшетах и десктопах.
Каждый viewport отображается в реалистичной рамке устройства — ободок телефона, рамка планшета, корпус ноутбука. Визуальный контекст помогает стейкхолдерам понять, какой viewport соответствует какому устройству во время обзоров и презентаций.
Переключайте отдельные устройства вкл./выкл. для сосредоточения на конкретных сравнениях размеров. Сравниваете только мобильное и десктопное устройство? Отключите пресеты для планшета. Нужно видеть только iPhone? Отключите всё остальное. Полный контроль над отображаемыми viewport.
После внедрения адаптивного дизайна используйте Responsive Viewer, чтобы убедиться, что каждый раздел корректно выглядит на всех целевых размерах устройств. Выявляйте переполнение текста, проблемы с масштабированием изображений, некорректное сворачивание навигации и несоответствия в отступах — всё в одном виде.
Показывайте клиентам, как их сайт выглядит на разных устройствах во время обзорных встреч. Вид бок о бок интуитивно понятен сразу — не нужно объяснять концепцию viewport. Клиенты видят мобильное, планшетное и десктопное отображение одновременно.
Видите нарушение макета при конкретной ширине? Добавьте произвольный viewport с точным значением пикселей, где возникает проблема, и сравните его с чуть более широкими и узкими viewport, чтобы определить, какая точка перелома CSS вызывает проблему.
Проверяйте, корректно ли переносятся длинные заголовки на мобильных устройствах, становятся ли таблицы данных прокручиваемыми на маленьких экранах, достаточно ли велики поля форм для нажатия и остаются ли CTA-кнопки видимыми и доступными на всех размерах устройств.
Используйте вид на нескольких устройствах для создания убедительных изображений-витрин адаптивного дизайна. Сделайте скриншот Responsive Viewer с вашим дизайном на 3–4 устройствах для презентаций в портфолио.
Откройте плавающую панель DevSuite Pro и нажмите на иконку Responsive Viewer. Страница переходит в режим нескольких viewport с рамками устройств, отображаемыми бок о бок.
Панель устройств вверху показывает доступные пресеты (iPhone, iPad, Pixel, MacBook, Desktop). Нажмите на устройства для их включения/отключения. Выбранные устройства отображаются в виде viewport ниже.
Нажмите кнопку «Custom» и введите конкретные размеры ширина × высота для добавления произвольного viewport. Удобно для тестирования точных значений точек перелома: 768px, 1024px или 1280px.
Прокрутите любой viewport — все остальные перейдут на ту же позицию. Сравнивайте, как один и тот же раздел выглядит на всех выбранных размерах устройств одновременно.
Нажмите иконку Responsive Viewer ещё раз или кнопку закрытия, чтобы выйти из режима нескольких viewport и вернуться к обычному виду одной страницы.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
