Как сделать скриншот сайта так, будто бы он отображается в браузере мобильного устройства и к тому же с изображением самого телефона, знает Google Chrome.
Это можно сделать с помощью не всем известной функциональной особенности интернет-браузера для настольных операционных
систем, которая помогает эмулировать мобильное устройство.
Помимо того, что такой скриншот будет выглядеть просто красиво, пригодится владельцам сайтов на мобильную тематику как дополнительный контент для статей, в целом эта функция также стала очень полезной и для веб-разработчиков.
При создании ими веб-ресурсов, сразу можно убедиться в правильности отображения страниц сайта на смартфонах разных размеров (разрешениях экрана), вплоть до самостоятельной установки нужных собственноручно.
Доступно большое количество предопределенных размеров устройств, таких как IPad, iPhone, Nexus или Samsung Galaxy, к тому же разных версий.
После того, как нужная веб-страница открыта в браузере и активировано ее отображение в эмуляторе, пользователь сможет захватить скриншот, при этом самостоятельно добавив рамку необходимого смартфона.
Вот какого порядка действий нужно придерживаться.
КАК СДЕЛАТЬ СКРИНШОТ
1. Откройте нужную страницу в Chrome и нажмите клавишу F12 на клавиатуре, что запустит «Инструменты разработчика«.
2. В верхней правой панели инструментов нажмите на «Toggle device toolbar».
3. В верхней левой панели выберите желаемое устройство из списка или кликнув по кнопке «Edit…» отметьте недостающие эмуляторы устройств по списку (а также при необходимости выберите «Responsive» и задайте произвольный размер).
4. Нажмите на три вертикальные точки, выберите пункт меню под названием «Capture Screenshot» и сохраните готовый снимок в любом доступном месте на диске компьютера в PNG-формате.
Теперь вы можете его публиковать на своем сайте, на странице в социальной сети или отослать по электронной почте.
Комментарии