Что показывает
Шесть карточек с типичными разрешениями — 1920×1080 (десктоп), 1440×900 (ноутбук), 1024×768 (планшет альбомный), 768×1024 (планшет портретный), 480×854 (телефон), 380×760 (телефон компактный). Каждая карточка — настоящий iframe, отрисованный в реальном размере и затем масштабированный вниз одним и тем же коэффициентом, поэтому пропорции карточек друг относительно друга совпадают с реальным соотношением экранов, а не подогнаны под равную ширину искусственно.
Зачем это нужно
Пригодится, чтобы одним взглядом оценить, как сайт ведёт себя на разных брейкпоинтах, не меняя вручную размер окна браузера шесть раз подряд. Удобно при приёмке вёрстки от подрядчика или при быстрой самопроверке перед сдачей.
Ограничения
Часть сайтов не покажется в карточках вовсе. Многие сайты явно запрещают показывать себя во фрейме через заголовок X-Frame-Options или директиву Content-Security-Policy: frame-ancestors — это защита самого сайта от встраивания на чужих страницах, браузер её соблюдает безусловно, обойти на стороне нашей страницы нельзя. Сейчас адрес подставляется в iframe напрямую; для сайтов с такой защитой карточка останется пустой. Отдельное ограничение — инструмент работает только с сайтами по HTTPS: сама эта страница открывается по HTTPS, а браузер безусловно блокирует показ HTTP-адреса во фрейме внутри HTTPS-страницы (Mixed Content) — это тоже нельзя обойти на нашей стороне. Если у сайта нет SSL-сертификата вообще, в предпросмотре он тоже останется пустой карточкой.
Ещё нюанс: показывается живая страница, а не снимок — она выполняет свой JS, может показать баннер cookie или другое состояние по умолчанию, и это ожидаемо.
Проверка адаптива онлайн — бесплатно
Пригодится вёрстальщикам и веб-студиям для быстрой визуальной проверки адаптивности — своей или чужой — без установки специальных программ и расширений.