Эмуляция мобильных устройств (эмуляция устройств)

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

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

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

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

Подробное содержимое:

• Имитация мобильного окна просмотра
  • Режим адаптивного окна просмотра
  • Отображение запросов мультимедиа
  • Настройка коэффициента пикселей устройства
  • Установка типа устройства
  • Режим окна просмотра мобильных устройств
  • Поворот окна просмотра в альбомную ориентацию
  • Показать кадр устройства
  • Добавление пользовательского мобильного устройства
  • Показать линейки
  • Масштабирование окна просмотра
  • Создание снимка экрана
• Регулирование сети и ЦП
  • Вкладки "Сеть" и "Производительность" имеют значок предупреждения при регулировании
  • Регулирование только ЦП
  • Регулирование только сети
• Эмулировать датчики
  • Переопределение геолокации
  • Установка ориентации
• Задание строки агента пользователя
• Настройка указаний клиента агента пользователя

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

1. Откройте средства разработки. Например, щелкните правой кнопкой мыши веб-страницу и выберите пункт Проверить.

2. На панели действий нажмите кнопку Переключить эмуляцию устройства (). Или в DevTools выберите Настройка и управление Средствами разработки (...) >Эмуляция устройства:

   

   Веб-страница отображается в области Эмуляция устройства. Панель инструментов устройства откроется в режиме адаптивного окна просмотра.

Чтобы быстро проверить внешний вид страницы в нескольких размерах экрана, перетащите маркеры, чтобы изменить размер окна просмотра до требуемых размеров. В полях ширины и высоты можно ввести любые числовые значения. Если выбрать размер, превышающий доступный в окне браузера, окно просмотра будет автоматически масштабировано в соответствии с более крупным окном просмотра.

В следующем примере ширина окна просмотра имеет значение 400 , а высота — :736

Если вам нужно больше места на экране, вы можете изменить место, где закреплены средства разработки в окне браузера. См. раздел Изменение размещения средств разработки (отстыковка, закрепление вниз, закрепление слева).

Если на странице определены запросы мультимедиа, перейдите к измерениям окна просмотра, где эти запросы мультимедиа вступают в силу, показывая точки останова запросов мультимедиа над окном просмотра. Выберите Дополнительные параметры () >Показать запросы мультимедиа.

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

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

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

1. Нажмите кнопку Дополнительные параметры () и выберите Показать запросы мультимедиа:

   

   min-width Если max-width или точки останова определены веб-страницей, средства разработки отображают дополнительные полосы над окном просмотра:

   • Синяя полоса соответствует запросам max-width мультимедиа.
   • Зеленая полоса соответствует запросам мультимедиа, которые используют и min-widthmax-width.
   • Оранжевая полоса соответствует запросам min-width мультимедиа.

   

2. Чтобы изменить ширину окна просмотра, чтобы использовать запрос мультимедиа для этой точки останова, щелкните прямоугольник точки останова на панели точек останова. Ширина окна просмотра изменяется таким образом, что точка останова активируется, а макет веб-страницы обновляется.

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

См. также:

• Отладка запросов мультимедиа в статье Начало работы с просмотром и изменением CSS.

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

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

1. Выберите Дополнительные параметры (") >Добавьте коэффициент пикселей устройства:

   

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

2. В раскрывающемся списке DPR выберите значение DPR (1, 2 или 3). Значение по умолчанию — 2.

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

• Выберите Дополнительные параметры () >Удаление коэффициента пикселей устройства.

Чтобы имитировать мобильное или классическое устройство, используйте список Тип устройства :

Если список Тип устройства не отображается, выберите Дополнительные параметры>Добавить тип устройства.

Список Тип устройства содержит следующие типы устройств:

Ключ для столбцов в приведенной выше таблице:

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

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

1. Чтобы повернуть окно просмотра в альбомную ориентацию, выберите Повернуть ():

   

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

См. также раздел Установка ориентации ниже.

Чтобы имитировать размеры определенного мобильного устройства, нажмите кнопку Дополнительные параметры ( а затем выберите Показать кадр устройства , чтобы отобразить физический кадр устройства вокруг окна просмотра:

Если кадр устройства не отображается для определенного устройства, это означает, что в средствах разработки нет рисунков для этого устройства.

Рамка устройства для iPhone 6/7/8:

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

Чтобы добавить пользовательское устройство, выполните приведенные далее действия.

1. В Средствах разработки нажмите кнопку Переключить эмуляцию устройства ( чтобы включить эмуляцию устройства.

2. В раскрывающемся списке устройства слева выберите пункт меню Правка :

3. Выберите список >УстройстваИзменить:

   

   Откроется страницаDevToolsSettings> Devices (Emulated Devices).

4. Нажмите кнопку Добавить пользовательское устройство . На странице Эмулированные устройства в параметрах добавляется раздел Устройство в верхней части:

   Коэффициент пикселей устройства, строка агента пользователя и поля типа устройства являются необязательными. Тип устройства по умолчанию — Mobile:

   

5. В разделе Устройство в текстовых полях введите имя устройства, ширину экрана и высоту экрана для настраиваемого устройства.

6. При необходимости заполните следующие поля:

   • Коэффициент пикселей устройства. См . раздел Настройка коэффициента пикселей устройства выше; и Окно: свойство devicePixelRatio в MDN.

   • Строка агента пользователя. См . раздел Установка строки агента пользователя ниже. и Агент пользователя в MDN.

   • Тип агента пользователя (тип устройства). См . раздел Установка типа устройства выше. По умолчанию используется значение Mobile.

7. Нажмите кнопку Добавить . Новое устройство теперь доступно в раскрывающемся списке устройств в левом верхнем углу эмулятора устройства.

Чтобы удалить пользовательское устройство, выполните приведенные далее действия.

• В разделе DevTools Settings>>Devices (Emulated Devices (Emulated Devices) наведите указатель мыши на пользовательское имя устройства и щелкните значок корзины.

Если необходимо измерить размеры экрана, можно использовать линейки для измерения размера экрана в пикселях.

Чтобы отобразить линейки выше и слева от окна просмотра:

• Выберите Дополнительные параметры () >Показать линейки:

  

  Линейки отображаются над и слева от окна просмотра, указывая размеры в пикселях:

  

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

Чтобы записать снимок экрана, который вы видите в настоящее время в окне просмотра, щелкните Дополнительные параметры (") >Снимок экрана:

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

Мобильные устройства часто имеют ограничения сети и ЦП.

Чтобы проверить, как быстро загружается страница и как она реагирует на разных скоростях Интернета и ЦП:

• В списке Регулирование измените предустановку на Мобильные устройства среднего уровня или Низкоуровневые мобильные устройства:

  

  Если список регулирования скрыт, расширите панель инструментов устройства.

• Мобильные устройства среднего уровня имитируют регулирование ЦПпри 4-х замедлении и регулирование сетидля медленного 4G. Это в четыре раза медленнее, чем обычно.

• Низкоуровневые мобильные устройства имитируют регулирование ЦПпри замедлении в 6 раз и регулирование сети3G. Это в шесть раз медленнее, чем обычно.

Все регулирование основано на обычных возможностях ноутбука или рабочего стола.

Если регулирование включено в эмуляции устройства, на вкладках средства "Сеть и производительность " на панели действий отображается значок предупреждения, который поможет вам узнать, что на производительность влияет регулирование:

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

1. В средствах разработки выберите средство Производительность .

2. Нажмите кнопку Параметры записи ( в правом верхнем углу.

3. В раскрывающемся списке ЦП выберите 4x замедление или 6x замедление:

   

Чтобы регулировать только сеть, а не ЦП:

1. Выберите средство "Сеть" , а затем выберите Online>Fast 3G или Slow 3G.

   

   Или нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Command, начать вводить 3g, а затем выберите Включить быстрое регулирование 3G или Включить медленное регулирование 3G.

   

Вы также можете настроить регулирование сети в средстве производительности :

1. Выберите Параметры записи (), выберите список Сеть и измените предустановку на Fast 3G или Slow 3G.

   

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

В разделах ниже приведен краткий обзор того, как переопределить геолокацию и задать ориентацию устройства.

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

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

1. На панели действий нажмите кнопку Другие инструменты ("), а затем выберите Датчики:

   

   Или откройте меню Команд, выбрав CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Введите Sensors и выберите Показать датчики:

   

2. Выберите раскрывающееся меню Расположение , а затем выберите одно из предустановленных расположений:

   

Чтобы ввести пользовательское расположение, выберите Другое и введите координаты пользовательского расположения.

Чтобы проверить поведение страницы при недоступности сведений о расположении, выберите Расположение недоступно.

См. также:

• Переопределение геолокации с помощью средства "Датчики"

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

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

1. На панели действий нажмите кнопку Другие инструменты ("), а затем выберите Датчики:

   

   Или откройте меню Команда, нажав клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Введите Sensors, а затем выберите Показать датчики:

   

2. В раскрывающемся меню Ориентация выберите предустановленную ориентацию.

   Или, чтобы ввести собственную ориентацию, выберите Пользовательская ориентация и введите собственные значения альфа, бета-версии и гамма :

   

См. также:

• Имитация ориентации устройства с помощью средства "Датчики"

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

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

1. Выберите Другие средства (+) >Условия сети:

   

   Или откройте меню Команда, нажав клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Введите Network conditionsи выберите Показать условия сети:

   

2. В разделе Агент пользователя средства Условия сети снимите флажок Использовать браузер по умолчанию .

3. Чтобы выбрать из списка предопределенных строк агента пользователя, щелкните меню, в которое изначально считывается пользовательское значение.

   Или, чтобы ввести собственную строку агента пользователя, введите строку в текстовом поле Ввод пользовательского агента:

   

См. также:

• Переопределение строки агента пользователя

Если на сайте используются клиентские подсказки агента пользователя, используйте средство Эмулированные устройства , чтобы добавить устройства и задать указания клиента агента пользователя:

1. Щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить.

2. Выберите Параметры Устройства>. Откроется страница Эмулированные устройствав разделе Параметры .

3. Нажмите кнопку Добавить пользовательское устройство , а затем разверните список клиентских подсказок агента пользователя:

   

4. Введите уникальное имя в текстовое поле Имя устройства , Test101например .

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

6. Задайте указания клиента агента пользователя следующим образом:

   • Торговая марка и версия, например Edge и 92. Выберите + Добавить торговую марку , чтобы добавить несколько пар фирменной символики и версии.
   • Полная версия браузера , например 92.0.1111.0.
   • Платформа и версия , например Windows и 10.0.
   • Архитектура , например x86.
   • Модель устройства , например Galaxy Nexus.

   Вы можете задать или изменить любые указания клиента агента пользователя. Обязательные значения отсутствуют.

7. Щелкните Добавить. Новое устройство отображается в выбранном состоянии в верхней части списка Эмулированные устройства .

Вы также можете задать указания клиента агента пользователя в средстве "Сеть ". См . справочник по сетевым функциям.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.