Фронтенд-разработчикам
Проверяйте брейкпоинты на живом DOM при точной ширине устройств, без переключения DevTools и без возни с окнами.
НовоеРабочие доски - 10 устройств сразу
Ваш сайт безупреченна любом iPhone.
Viewport накладывает точные рамки устройств прямо на сайт, который вы уже открыли. Сравнивайте брейкпоинты рядом, находите ошибки вёрстки раньше QA и экспортируйте снимки в рамке или записи в 4K, полностью на своей машине.
Любой сайт · 38 устройств · Настройки синхронны между вкладками · Без аккаунта, без телеметрии, без загрузок
Chrome Web Store★ 5.0·Более 5000 пользователей
В подборкеРекомендовано Chrome
yourstore.com
Кому это нужно
Одно расширение, три сценария работы
Тем, кто делает адаптивные интерфейсы, тем, кто их проектирует, и тем, кому приходится доказывать, что всё работает.
Продуктовым дизайнерам
Проверяйте отступы, типографскую шкалу и безопасные зоны в точных рамках, а затем выгружайте снимки прямо в спецификацию или презентацию.
Агентствам и фрилансерам
Показывайте качество адаптива прямо на созвоне. Один демонстрируемый экран показывает десктоп и мобильный вместе, без разделения окон.
Возможности
Четыре вещи, которые он делает превосходно
Никакой каши из функций. Это те четыре возможности, вокруг которых построено всё расширение.
Живое демо
Попробуйте расширение прямо здесь
Это настоящий сценарий: выберите устройство на панели, поверните его, сделайте снимок, включите запись. Страница за ним - ваш сайт.
yourpage.com
402 x 874/34%
От сборки до приёмки
Докажите, что работает, до того как спросят
Качество адаптива гораздо проще показать, чем описать. Viewport превращает внутреннюю проверку в то, что можно сразу отдать клиенту.
Начало работы
Запуск в три клика
Без конфигов, без аккаунта, без настройки проекта.
01
Откройте любую страницу
Нажмите значок на панели. Поверх живого сайта появится устройство, уже загруженное и полностью интерактивное.
02
Настройте вид
Выберите устройство, поверните, измените масштаб и перетащите куда угодно, или соберите целую доску из телефонов, планшетов и мониторов.
03
Сравните и снимите
Прокручивайте синхронно во всех рамках, затем выгрузите снимок в рамке или запишите весь проход целиком.
Измерено, а не обещано
В чём Viewport вырывается вперёд
Сравнение с самыми устанавливаемыми расширениями адаптивного предпросмотра в Chrome Web Store.
Архитектура local-first
Ничто не покидает вашу машину, и мы показываем как
У Viewport нет бэкенда для ваших данных. Ни аналитики, ни телеметрии, ни удалённо загружаемого кода. Настройки живут в chrome.storage.local; снимки сохраняются сразу на ваш диск.
Чтобы отрисовать страницу внутри рамки, браузеры требуют ослабить X-Frame-Options и Content-Security-Policy для запроса предпросмотра. Мы ограничиваем это только просматриваемым источником (сторонние фреймы сохраняют свою защиту) и показываем предупреждение, пока это активно. Всё снимается в тот момент, когда вы закрываете предпросмотр.
Большинство инструментов делают это молча и на всю вкладку. Мы предпочитаем, чтобы вы знали.
Цены
Бесплатно навсегда. Pro, когда того требует работа.
Бесплатный тариф - это полноценный инструмент без ограничения по времени, а не пробный период.
Бесплатно
$0навсегда
- Все 38 рамок устройств
- До 3 устройств на экране
- Неограниченные снимки в рамке
- Запись WebM до 2 минут
- Запасное реальное окно на строгих сайтах
Pro
Выбирают чаще$4.17/ месяц, $50 при оплате за год
- Всё из бесплатного, плюс:
- Доски на 10 устройств и сохранённые сцены
- Неограниченный 4K MP4, обрезка и скорость
- Сравнение сборок и аудит вёрстки
- Ограничение сети, геолокация и локаль
Бесплатный план, без аккаунтаОтмена в любой моментБезопасная оплата через Lemon Squeezy
Частые вопросы
Ответы до того, как вы спросите
Пять вопросов, которые каждый разработчик задаёт перед установкой.
Нет, и ничто работающее внутри браузера этого не заменяет. Viewport отрисовывает вашу настоящую страницу при точной ширине viewport каждого устройства с соответствующими client hints, что ловит подавляющее большинство проблем вёрстки и брейкпоинтов. Критичные перед релизом проверки по-прежнему делаются на реальных устройствах.
Хватит выпускать брейкпоинты, которых вы не видели.
Добавьте Viewport в Chrome и проверьте все устройства на странице, которая уже перед вами. Бесплатно, без аккаунта и без загрузки данных.