Три способа снять сайт таким, каким он выглядит на телефоне: записать экран самого телефона, эмулировать телефон в Chrome DevTools или отрендерить страницу по URL в ширине телефона.
Aviral LakhanpaulОбновлено Чтение: 2 мин
Загрузите страницу в ширине телефона, чтобы сайт отдал настоящую мобильную вёрстку, и снимайте уже её. Можно записать экран настоящего телефона, эмулировать телефон через панель устройств в Chrome DevTools и записать окно или отдать URL инструменту, который читает страницу в ширине телефона и сразу экспортирует видео 9:16 или 4:5. Никогда не уменьшайте десктопную запись: получится маленькая десктопная страница, а не мобильный сайт.
Адаптивный сайт выбирает вёрстку по ширине окна, в котором открыт. В ширине десктопа вы получите десктопную вёрстку, как бы потом ни обрезали видео. Чтобы получить кнопку меню, колонки одна под другой и крупные зоны нажатия мобильного сайта, саму страницу нужно загрузить в ширине телефона. Всё, что ниже, — разные способы это сделать.
| Способ | Подходит для | Чего остерегаться |
|---|---|---|
| Записать экран самого телефона | Настоящее касание, настоящее устройство | Строка состояния и уведомления в кадре, прокрутка пальцем рывками |
| Панель устройств в Chrome DevTools | Страницы на localhost или за логином | Запись маленького окна, прокрутка вручную или скриптом |
| Отрендерить URL в ширине телефона | Публичные страницы, чистая ровная прокрутка | Закрытые страницы недоступны |
И в iPhone, и в Android есть встроенная запись экрана в быстрых настройках. Она снимает настоящее устройство, и это честно, и снимает прокрутку, и в этом проблема: большой палец делает рывок, страница катится по инерции, и каждый рывок выглядит по-своему.
Откройте DevTools, включите панель устройств (⇧ ⌘ M на Mac, Ctrl Shift M в Windows) и выберите телефон из списка. Страница перезагрузится в этой ширине с user agent сенсорного устройства и отдаст мобильную вёрстку. Запишите только эту область просмотра программой записи экрана, а прокрутку доверьте скрипту; он есть в руководстве по автопрокрутке.
Перед записью поставьте масштаб на панели устройств на 100%, иначе программа запишет уменьшенную копию и текст станет мягким.
Вставьте адрес на главной странице и вверху настроек видео выберите «Телефон» или «Планшет». Страница загружается в этой ширине на наших серверах, поэтому сайт отвечает той вёрсткой, которую там действительно отдаёт, и становятся доступны форматы, подходящие телефону: 9:16, 4:5 и 1:1.
Отрендеренное или записанное мобильное видео — это только экран. Чтобы показать его внутри iPhone или Pixel, поместите видео на устройство в приложении для мокапов или в шаблоне видеоредактора. Экспортируйте в 9:16, чтобы видео заполнило экран устройства без полос.
Вставьте ссылку и бесплатно посмотрите прокрутку в предпросмотре. Бесплатных кредитов при регистрации: 51. Карта не нужна, а на экспортах нет водяного знака.
Загрузите страницу в ширине телефона через панель устройств в Chrome DevTools и запишите эту область просмотра. Или вставьте URL в инструмент, который читает страницу в ширине телефона и сразу экспортирует видео.
Потому что страницу загрузили в ширине десктопа, а потом обрезали или уменьшили. Вёрстка выбирается по ширине окна, поэтому, чтобы показать мобильный сайт, страницу нужно загрузить в ширине телефона.
9:16, чтобы заполнить экран телефона, как в Reels, TikTok и сторис. 4:5 для поста в ленте. 1:1, если видео могут показать и там и там.
Автоматизируйте запись сайтов: настраиваемое движение, умные регуляторы и параметры экспорта, сделанные для современных авторов.
