Сделать снимок экрана веб-страницы с рамкой устройства в Chrome

Менее известной функцией Google Chrome в операционных системах для настольных ПК является возможность сделать снимок экрана открытой страницы, как если бы сделанный снимок экрана принадлежал браузеру, работающему на мобильном устройстве. Он даже может добавить рамку вокруг снимка экрана, чтобы он выглядел как реалистичная фотография смартфона. Вот как это можно сделать.

В Chrome Developer Tools есть специальный инструмент, который позволяет имитировать мобильное устройство. Разработчикам очень полезно проверить, как их веб-сайты выглядят на смартфонах и устройствах с маленьким экраном. Он позволяет указать собственный размер экрана или использовать предопределенные размеры устройства, такие как iPhone, iPad, Nexus или Samsung Galaxy. Как только открытая страница отображается в эмуляторе устройства, пользователь может сделать снимок экрана страницы. Также можно включить рамку устройства вокруг страницы, чтобы она выглядела как реалистичная фотография.

Это можно сделать следующим образом.

  1. Откройте нужную страницу в Chrome и нажмите F12 . Откроется Инструменты разработчика:
  2. Нажмите кнопку эмулятора мобильного устройства, чтобы переключить режим инструментов разработчика:
  3. Под селектором устройств выберите какое-нибудь устройство. Например, я выберу iPhone 6:
  4. Теперь щелкните меню с тремя точками справа от селектор устройств и отметьте опцию «Показать фрейм устройства»:
  5. Вуаля, теперь ваша веб-страница отображается внутри красивой рамки устройства:

    Теперь снова щелкните меню с тремя точками и выберите «Захват» скриншот “:

Результат будет следующим:

Готово.

‘);

Оцените статью
digitdocom.ru
Добавить комментарий