Быстрее всего сделать мобильный скриншот сайта на компьютере так: открыть страницу в мобильном виде и снять её. В расширении для мобильного просмотра достаточно нажать кнопку скриншота, а в режиме устройства Chrome DevTools для этого есть пункты Capture screenshot и Capture full size screenshot в меню панели устройств. Оба способа дают изображение страницы в том виде, в каком её рисует телефон, и сам телефон для этого не нужен.
Какой способ выбрать, зависит от того, нужен ли вам видимый экран или страница целиком и должна ли на картинке быть рамка телефона.
Видимая область или вся страница
Решите это заранее, потому что инструменты здесь отличаются.
Скриншот области просмотра показывает то, что человек видит на экране телефона без прокрутки. Он подходит для баг-репортов («кнопку закрывает плашка cookie»), маркетинговых картинок в стиле магазинов приложений и проверки первого экрана дизайна.
Скриншот всей страницы склеивает всю прокручиваемую страницу в одно длинное изображение. Он нужен для вычитки контента, согласования лендинга или архивирования страницы перед редизайном. Учтите, что «липкие» шапки, изображения с ленивой загрузкой и анимации при прокрутке на таких снимках могут выглядеть странно, ведь браузер отрисовывает всю страницу разом.
Способ 1: расширение для мобильного просмотра
Самый быстрый путь, особенно если мобильные скриншоты нужны регулярно, это расширение. В Mobile View Extension кнопка скриншота есть на плавающей панели. Выберите пресет телефона или планшета, и расширение сохранит PNG области просмотра в рамке, ровно то, что видно в превью. Мобильный вид не выключается при переходах, поэтому можно пройтись по сайту и снять каждую страницу за пару секунд.
Так получаются скриншоты видимой области. Для снимка сайта целиком используйте режим устройства в DevTools (способ 2).
Способ 2: режим устройства в Chrome DevTools
DevTools встроен в Chrome, ничего не нужно устанавливать, и он умеет снимать страницу целиком:
- Откройте DevTools (
F12) и включите панель устройств (Ctrl + Shift + M, на MacCmd + Shift + M). - Выберите устройство и перезагрузите страницу.
- Откройте меню из трёх точек в правом верхнем углу панели устройств.
- Выберите Capture screenshot для видимой области или Capture full size screenshot для всей страницы.
Чтобы на снимке был контур телефона, выберите конкретную модель и перед съёмкой включите в том же меню Show device frame. Chrome сохранит PNG в папку загрузок.
Те же команды доступны через меню команд: нажмите Ctrl + Shift + P (Cmd + Shift + P на Mac) и введите «screenshot». Там есть ещё пункт Capture node screenshot, который снимает один выделенный элемент. Это удобно, когда нужно задокументировать отдельный компонент.
Способ 3: настоящий телефон
Скриншоты с реального телефона самые честные: на них есть адресная строка браузера, вырез или Dynamic Island и настоящая отрисовка шрифтов. На большинстве телефонов после обычного скриншота появляется вариант «длинного» снимка или снимка всей страницы. На iPhone в редакторе скриншота Safari есть вкладка Вся страница, которая сохраняет страницу в PDF.
Снимки с реального устройства используйте для всего, что клиент или заказчик будет разглядывать попиксельно.
Как получить чёткие и точные изображения
Несколько деталей делают мобильные скриншоты полезнее:
- Чёткость зависит от плотности пикселей. Область просмотра iPhone шириной 390 px при коэффициенте 3 даёт картинку шириной 1170 px. Если скриншот выглядит размытым, проверьте, правильный ли коэффициент у эмулируемого устройства. Коэффициенты актуальных моделей есть в таблице разрешений экранов iPhone.
- Дождитесь шрифтов и изображений. Снимайте после того, как загрузились веб-шрифты и картинки с ленивой загрузкой, иначе на скриншоте окажутся запасные шрифты и серые прямоугольники.
- Решите, что делать с плашками. Баннеры cookie и виджеты чатов закрывают большую часть маленького экрана. Определитесь, должны ли они быть на снимке; для баг-репорта обычно должны.
- Подписывайте, что эмулировали. Добавляйте устройство, браузер и дату в имя файла или в задачу, например
pricing_iphone-16_chrome-emulated_2026-10-21.png. Инструменты в браузере рисуют страницу движком Chrome, так что снимок с подписью «iPhone» может немного отличаться от настоящего Safari.
Где мобильные скриншоты приносят пользу
Мобильные скриншоты окупаются в трёх местах. В тестировании прикладывайте их к задачам, чтобы разработчики видели точную ширину, на которой что-то сломалось; ширину можно прочитать на панели устройств. На ревью дизайна кладите мобильный и десктопный снимки рядом и проверяйте, что порядок контента по-прежнему логичен. В маркетинге используйте скриншоты в рамке на лендингах и в карточках приложений, но снимайте их с реального устройства или с явной пометкой об эмуляции.
Общий процесс тестирования, в который входят эти скриншоты, описан в чек-листе тестирования мобильной версии сайта.
Частые вопросы
Как сделать скриншот сайта целиком в мобильной версии в Chrome?
Откройте DevTools, включите панель устройств, выберите модель, перезагрузите страницу и выберите Capture full size screenshot в меню из трёх точек на панели устройств.
Можно ли сделать мобильный скриншот без DevTools?
Да. Расширение для мобильного просмотра с кнопкой скриншота, например Mobile View Extension, снимает вид в размере телефона с плавающей панели.
Почему мобильный скриншот такой широкий в пикселях?
Скриншоты сохраняются с учётом плотности пикселей устройства. Область просмотра шириной 390 px при коэффициенте 3 даёт картинку шириной 1170 px. Так и должно быть: это сохраняет чёткость на экранах высокой плотности.