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

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

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

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

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

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

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

Вот какого порядка действий нужно придерживаться.

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

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

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

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

Toggle device toolbar

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

Responsive

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

Capture Screenshot

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

Скриншот

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

Комментарии:

Leave a Reply

Ваш e-mail не будет опубликован.