Имитация мобильных устройств в режиме устройства

София Емельянова
Sofia Emelianova

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

Обзор

Режим устройства — это название набора функций Chrome DevTools, которые помогают моделировать мобильные устройства. Эти функции включают в себя:

Ограничения

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

Есть некоторые аспекты мобильных устройств, которые DevTools никогда не сможет имитировать. Например, архитектура мобильных процессоров сильно отличается от архитектуры процессоров ноутбуков или настольных компьютеров. Если вы сомневаетесь, лучше всего запустить свою страницу на мобильном устройстве. Используйте удаленную отладку для просмотра, изменения, отладки и профилирования кода страницы со своего ноутбука или настольного компьютера, пока он фактически работает на мобильном устройстве.

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

Чтобы открыть панель инструментов устройства, выполните следующие действия:

  1. Откройте Инструменты разработчика .
  2. Щелкните устройства. Переключите панель инструментов устройства , расположенную на панели действий вверху.

Кнопка переключения панели инструментов устройства

Имитировать мобильную область просмотра

По умолчанию панель инструментов устройства открывается во вьюпорте с параметром «Размеры» , установленным на «Адаптивный» . Используя раскрывающийся список «Размеры» , вы можете смоделировать размеры конкретного мобильного устройства .

Панель инструментов устройства.

Адаптивный режим просмотра

Перетащите маркеры, чтобы изменить размер области просмотра до необходимых вам размеров. Или введите конкретные значения в поля ширины и высоты. В этом примере ширина установлена ​​на 480 , а высота — на 415 .

Маркеры для изменения размеров области просмотра в адаптивном режиме области просмотра.

Альтернативно, используйте панель предустановок ширины, чтобы одним щелчком мыши установить одно из следующих значений ширины:

Панель настроек ширины.

Мобил С Мобил М Мобил Л Таблетка Ноутбук Ноутбук Л
320 пикселей 375 пикселей 425 пикселей 768 пикселей 1024 пикселей 1440 пикселей 2560 пикселей

Показать медиа-запросы

Чтобы отобразить точки останова медиазапроса над областью просмотра, нажмите Больше возможностей. Дополнительные параметры > Показать медиа-запросы .

Показать медиа-запросы.

DevTools теперь отображает две дополнительные панели над областью просмотра:

  • Синяя полоса с точками останова max-width .
  • Оранжевая полоса с точками останова min-width .

Щелкните между точками останова, чтобы изменить ширину области просмотра, чтобы сработала точка останова.

Щелкните между точками останова, чтобы изменить ширину области просмотра.

Чтобы найти соответствующее объявление @media , щелкните правой кнопкой мыши между точками останова и выберите «Показать в исходном коде» . DevTools открывает панель «Источники» в соответствующей строке редактора .

Показать в раскрывающемся меню исходного кода.

Установить соотношение пикселей устройства

Соотношение пикселей устройства (DPR) — это соотношение между физическими пикселями на аппаратном экране и логическими (CSS) пикселями. Другими словами, DPR сообщает Chrome, сколько пикселей экрана нужно использовать для отрисовки CSS-пикселя. Chrome использует значение DPR при рисовании на дисплеях HiDPI (высокое количество точек на дюйм).

Чтобы установить значение DPR:

  1. Нажмите Дополнительные параметры. Больше возможностей. > Добавить соотношение пикселей устройства .

    Добавьте соотношение пикселей устройства.

  2. На панели действий в верхней части области просмотра выберите значение DPR в новом раскрывающемся меню DPR .

    Установка значения DPR.

Установите тип устройства

Используйте список «Тип устройства» , чтобы имитировать мобильное или настольное устройство.

Список типов устройств.

Если вы не видите список на панели действий вверху, выберите Дополнительные параметры. Больше возможностей. > Добавить тип устройства .

В следующей таблице описаны различия между вариантами. Метод рендеринга определяет, отображает ли Chrome страницу как область просмотра для мобильных устройств или настольных компьютеров. Значок курсора обозначает тип курсора, который вы видите, когда наводите курсор на страницу. Под «вызванными событиями» подразумевается, активируются ли на странице события touch или click при взаимодействии со страницей.

Вариант Метод рендеринга Значок курсора События запущены
мобильный мобильный Круг трогать
Мобильный (без сенсорного управления) мобильный Нормальный щелкнуть
Рабочий стол Рабочий стол Нормальный щелкнуть
Рабочий стол (сенсорный) Рабочий стол Круг трогать

Специализированный режим устройства

Чтобы смоделировать размеры конкретного мобильного устройства, выберите устройство из списка «Размеры» .

Список размеров.

Дополнительную информацию см. в разделе Добавление пользовательского мобильного устройства .

Поворот видового экрана в альбомную ориентацию

Нажмите screen_rotation Rotate , чтобы повернуть область просмотра в альбомную ориентацию.

Ландшафтная ориентация.

Обратите внимание, что Поворот Поворот. Кнопка исчезает, если панель инструментов вашего устройства узкая.

Панель инструментов устройства.

См. также Установить ориентацию .

Переключить режим двойного экрана

Некоторые устройства, например Surface Duo, имеют два экрана и два способа их использования: с активным одним или обоими экранами.

Чтобы переключиться между двумя и одним экраном, нажмите кнопку devices_fold «Переключить режим двух экранов» на панели инструментов.

Включился режим двухэкранного режима.

Установить положение устройства

Некоторые устройства, например Asus Zenbook Fold, имеют складные экраны. Такие ширмы имеют положение: сплошное или сложенное. Непрерывное положение относится к «плоскому» положению, а сложенное положение образует угол между частями дисплея.

Чтобы задать положение устройства, выберите «Непрерывное» или «Сложенное» в соответствующем раскрывающемся меню на панели инструментов.

Поза установлена ​​в сложенном виде.

Показать рамку устройства

При моделировании размеров конкретного мобильного устройства, например Nest Hub, выберите «Дополнительные параметры». Больше возможностей. > Показать рамку устройства , чтобы отобразить рамку физического устройства вокруг области просмотра.

Показать рамку устройства.

В этом примере DevTools показывает кадр для Nest Hub.

Рамка устройства для Nest Hub.

Добавить пользовательское мобильное устройство

Чтобы добавить пользовательское устройство:

  1. Щелкните список устройств и выберите «Изменить» .

    Редактировать.

  2. На вкладке « Настройки » > «Устройства» либо выберите устройство из списка поддерживаемых, либо нажмите «Добавить собственное устройство», чтобы добавить свое собственное.

  3. Если вы добавляете собственное устройство, введите имя, ширину и высоту устройства, а затем нажмите «Добавить» .

    Создание индивидуального устройства.

    Поля «Соотношение пикселей устройства» , «строка пользовательского агента » и «тип устройства» являются необязательными. Поле типа устройства представляет собой список, для которого по умолчанию установлено значение «Мобильное» .

  4. Вернувшись в область просмотра, выберите вновь добавленное устройство из списка «Размеры» .

Показать линейки

Нажмите Дополнительные параметры. Больше возможностей. > Покажите правителей , чтобы увидеть правителей. Единица измерения линеек — пиксели.

Покажите линейки.

DevTools показывает линейки вверху и слева от области просмотра.

Линейки выше и слева от области просмотра.

Щелкните линейки в определенных метках, чтобы установить ширину и высоту области просмотра.

Масштабировать область просмотра

Используйте список масштабирования для увеличения или уменьшения масштаба.

Увеличение.

Сделать снимок экрана

Чтобы сделать снимок экрана того, что вы видите в окне просмотра, нажмите Больше возможностей. Дополнительные параметры > Сделать снимок экрана .

Параметр «Сделать снимок экрана» в меню «Дополнительные параметры».

Чтобы сделать снимок экрана всей страницы, включая содержимое, которое не отображается в области просмотра, выберите «Сделать снимок экрана в полном размере» в том же меню.

Чтобы включить рамку устройства при создании снимка экрана в режиме «Специальное устройство» , сначала «Показать рамку устройства» , а затем нажмите «Сделать снимок экрана» , как указано ранее.

Создание снимка экрана с включенной рамкой устройства.

Чтобы узнать о других способах создания снимков экрана с помощью DevTools, см. раздел «4 способа создания снимков экрана с помощью DevTools» .

Регулирование сети и процессора

Чтобы регулировать как сеть, так и ЦП, выберите «Мобильные устройства среднего уровня» или «Мобильные устройства низкого уровня» в списке «Регулирование» .

Список дроссельной заслонки.

Мобильные устройства среднего уровня имитируют быстрый 3G и ограничивают работу вашего процессора, так что он работает в 4 раза медленнее, чем обычно. Бюджетный мобильный телефон имитирует медленный 3G и снижает нагрузку на процессор в 6 раз медленнее, чем обычно. Имейте в виду, что регулирование зависит от обычных возможностей вашего ноутбука или настольного компьютера.

Обратите внимание, что список регулирования будет скрыт, если панель инструментов вашего устройства узкая.

Регулировать только процессор

Чтобы регулировать только процессор, а не сеть, перейдите на панель «Производительность» и нажмите «Параметры захвата» . Настройки захвата. , а затем выберите «Замедление в 4 раза» , «Замедление в 6 раз» или «Замедление в 20 раз» из списка ЦП .

Список процессоров.

Только дросселирование сети

Чтобы регулировать только сеть, а не процессор, перейдите на панель «Сеть» и выберите «Быстрый 3G» или «Медленный 3G» в списке «Дроссель» .

Список дроссельной заслонки.

Или нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux, ChromeOS), чтобы открыть командное меню, введите 3G и выберите «Включить быстрое регулирование 3G» или «Включить медленное регулирование 3G» .

Командное меню.

Вы также можете настроить регулирование сети на панели «Производительность» . Нажмите «Настройки захвата». Настройки захвата. а затем выберите «Быстрый 3G» или «Медленный 3G» в списке «Сеть» .

Настройка регулирования сети с панели «Производительность».

Эмуляция датчиков

Используйте панель «Датчики» , чтобы переопределить геолокацию, имитировать ориентацию устройства, принудительное касание и эмулировать состояние ожидания.

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

Переопределить геолокацию

Чтобы открыть пользовательский интерфейс, переопределяющий геолокацию, нажмите «Настроить и контролировать DevTools». Настраивайте и управляйте DevTools. а затем выберите Дополнительные инструменты > Датчики .

Датчики

Или нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux, ChromeOS), чтобы открыть командное меню, введите Sensors и затем выберите « Показать датчики» .

Показать датчики

Выберите один из предустановок в списке «Местоположение» или выберите «Другое...» , чтобы ввести собственные координаты, или выберите «Местоположение недоступно» , чтобы проверить, как ведет себя ваша страница, когда геолокация находится в состоянии ошибки.

Геолокация

Установить ориентацию

Чтобы открыть пользовательский интерфейс ориентации, нажмите «Настроить и контролировать DevTools». Настраивайте и управляйте DevTools. а затем выберите Дополнительные инструменты > Датчики .

Датчики

Или нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux, ChromeOS), чтобы открыть командное меню, введите Sensors и затем выберите « Показать датчики» .

Показать датчики

Выберите одну из предустановок в списке «Ориентация» или выберите «Пользовательская ориентация» , чтобы установить собственные значения альфа, бета и гаммы.

Ориентация