Эмуляция окна просмотра с метриками устройства Chrome

Когда мы создаем или создаем прототипы адаптивного веб-сайта, нам нужно протестировать веб-сайт в различных размерах окна просмотра, чтобы проверить, хорошо ли отображаются макет и страницы. Это можно сделать несколькими способами: вы можете использовать Adobe Edge Inspect или расширение для браузера, например: Размеры для Chrome,

Проблема в том, что эти инструменты не всегда работают без проблем в каждом случае. Adobe Edge Inspect требует, чтобы ваш ноутбук и мобильные устройства были подключены по одному и тому же беспроводному соединению, XIP.io также требует, чтобы ваши устройства подключались к Интернету, и, по моему опыту, довольно сложно отлаживать адаптивный веб-сайт под iframe или из-за необходимости неоднократно изменять размер окно браузера.
Эмулировать размер области просмотра
Chrome теперь поставляется со встроенной функцией, которая позволяет вам эмулировать ваш сайт с различными размерами экрана и разрешения устройства. Чтобы включить его, откройте параметр «Инструменты разработчика», перейдя из меню «Вид»> «Разработчик»> «Инструменты разработчика».
Перейдите на панель «Устройства». Выберите Добавить пользовательское устройство, чтобы добавить пользовательский размер области просмотра, соотношение пикселей и пользовательский агент.
Теперь добавленное нами пользовательское устройство появится в списке устройств следующим образом. Выберите его, и вы увидите, что окно просмотра изменилось мгновенно.
В остальном вы можете найти полный список размеров области просмотра мобильных устройств в Screensiz.es,
Вывод
Google Chrome имеет много полезных функций, которые могут упростить процесс разработки. Теперь, используя настройки устройства Chromes, вы можете отлаживать свой веб-сайт для определенного размера области просмотра, не сталкиваясь с ограниченными возможностями подключения, использованием сторонних расширений браузера или обходом iframe.