Как сделать скриншот сайта в виде смартфона

Сделать скриншотКак сделать скриншот сайта так, будто бы он отображается в браузере мобильного устройства и к тому же с изображением самого телефона, знает Google Chrome.

Это можно сделать с помощью не всем известной функциональной особенности интернет-браузера для настольных операционных систем, которая помогает эмулировать мобильное устройство.

Помимо того, что такой скриншот будет выглядеть просто красиво, пригодится владельцам сайтов на мобильную тематику как дополнительный контент для статей, в целом эта функция также стала очень полезной и для веб-разработчиков. При создании ими веб-ресурсов, сразу можно убедиться в правильности отображения страниц сайта на смартфонах разных размеров (разрешениях экрана), вплоть до самостоятельной установки нужных собственноручно.

Доступно большое количество предопределенных размеров устройств, таких как IPad, iPhone, Nexus или Samsung Galaxy, к тому же разных версий. После того, как нужная веб-страница открыта в браузере и активировано ее отображение в эмуляторе, пользователь сможет захватить скриншот.

При этом самостоятельно добавив рамку необходимого смартфона. Вот какого порядка действий нужно придерживаться.

СДЕЛАТЬ СКРИНШОТ

Откройте нужную страницу в Chrome и нажмите клавишу F12 на клавиатуре. Это запустит «Инструменты разработчика».

Инструменты разработчика

В верхней правой панели инструментов нажмите на «Toggle device toolbar».

Toggle device toolbar

В верхней левой панели выберите желаемое устройство из списка или кликнув по кнопке «Edit…». Отметьте недостающие эмуляторы устройств по списку, а также при необходимости выберите «Responsive» и задайте произвольный размер.

Responsive

Нажмите на три вертикальные точки, выберите пункт меню под названием «Capture Screenshot» и сохраните готовый снимок в любом доступном месте на диске компьютера в PNG-формате.

Capture Screenshot

Теперь вы можете его публиковать на своем сайте, на странице в социальной сети или отослать по электронной почте.

Скриншот

P.S. Нужны ещё компьютерные советы, перейдите в Карту блога.



Оцените инструкцию:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 3,00 из 5)
Загрузка...


Оставьте комментарий