Diese Seite wurde von der Cloud Translation API übersetzt.

Mobilgeräte-Emulation

In Chrome können Nutzer Chrome auf einem Mobilgerät über die Desktopversion von Chrome emulieren, indem sie den Gerätemodus mit Chrome DevTools aktivieren. Diese Funktion beschleunigt die Webentwicklung und ermöglicht es Entwicklern, schnell zu testen, wie eine Website auf einem Mobilgerät gerendert wird, ohne ein echtes Gerät zu benötigen. ChromeDriver kann auch Geräte mit der Funktion „mobileEmulation“ emulieren, die mit einem Dictionary-Wert angegeben wird.

Wie in den Entwicklertools gibt es in ChromeDriver zwei Möglichkeiten, die Mobile-Emulation zu aktivieren:

Bekanntes Gerät angeben
Einzelne Geräteattribute angeben

Das Format des Wörterbuchs „mobileEmulation“ hängt davon ab, welche Methode erforderlich ist.

Bekanntes Mobilgerät angeben

Wenn Sie die Geräteemulation für ein bestimmtes Gerät aktivieren möchten, muss das Wörterbuch „mobileEmulation“ den Namen „deviceName“ enthalten. Verwenden Sie als Wert für „deviceName“ einen gültigen Gerätenamen aus den Einstellungen für emulierte Geräte in den DevTools.

Screenshot der Geräteeinstellung

Java

Map<String, String> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceName", "Nexus 5");
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);
WebDriver driver = new ChromeDriver(chromeOptions);

Ruby

mobile_emulation = { "deviceName" => "Nexus 5" }
caps = Selenium::WebDriver::Remote::Capabilities.chrome(
   "chromeOptions" => { "mobileEmulation" => mobile_emulation })
driver = Selenium::WebDriver.for :remote, url: 'http://localhost:4444/wd/hub',
desired_capabilities: caps

Python

from selenium import webdriver
mobile_emulation = { "deviceName": "Nexus 5" }
chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Remote(command_executor='http://127.0.0.1:4444/wd/hub',
desired_capabilities = chrome_options.to_capabilities())

Einzelne Geräteattribute angeben

Sie können die Mobile-Emulation aktivieren, indem Sie einzelne Attribute angeben. Das Wörterbuch „mobileEmulation“ kann deviceMetrics-, clientHints-Wörterbücher und einen userAgent-String enthalten.

Die folgenden Gerätemesswerte müssen im Wörterbuch "deviceMetrics" angegeben werden:

„width“: die Breite des Bildschirms des Geräts in Pixeln
„height“: die Höhe des Bildschirms des Geräts in Pixeln
"pixelRatio" – das Pixelverhältnis des Geräts
„touch“ – gibt an, ob Touch-Ereignisse emuliert werden sollen. Der Standardwert ist „true“ und kann in der Regel weggelassen werden.
„mobile“: Gibt an, ob sich der Browser wie ein mobiler User-Agent verhalten soll (z. B. Bildlaufleisten überlagern, Ausrichtungsereignisse senden, den Inhalt auf die Größe des Darstellungsbereichs verkleinern). Der Standardwert ist „true“ und kann in der Regel weggelassen werden.

Das Wörterbuch „clientHints“ kann die folgenden Einträge enthalten:

"platform" – das Betriebssystem. Es kann sich dabei um einen bekannten Wert („Android“, „ChromeOS“, „ChromiumOS“, „Fuchsia“, „Linux“, „macOS“, „Windows“) handeln, der genau mit dem Wert übereinstimmt, der von Chrome auf der jeweiligen Plattform zurückgegeben wird. Es kann sich aber auch um einen benutzerdefinierten Wert handeln. Dieser Wert ist erforderlich.
„mobile“ – gibt an, ob der Browser eine mobile oder Desktop-Ressourcenversion anfordern soll. Normalerweise setzt Chrome auf einem Mobiltelefon mit Android diesen Wert auf "true". In Chrome auf einem Android-Tablet wird dieser Wert auf „false“ gesetzt. In der Desktopversion von Chrome wird dieser Wert ebenfalls auf „false“ gesetzt. Anhand dieser Informationen können Sie eine realistische Emulation festlegen. Dieser Wert ist erforderlich.
Die verbleibenden Einträge sind optional und können weggelassen werden, sofern sie für den Test nicht relevant sind:
- "brands" - Liste der Paare aus Marke und Hauptversion Wenn Sie diese Angaben weglassen, verwendet der Browser seine eigenen Werte.
- „fullVersionList“: Liste der Marken-/Versionspaare. Wird dies weggelassen, verwendet der Browser seine eigenen Werte.
- „platformVersion“ – Betriebssystemversion. Standardmäßig ist der String leer.
- „model“ – Gerätemodell. Standardmäßig ist der String leer.
- „architecture“ – CPU-Architektur. Bekannte Werte sind „x86“ und „arm“. Der Nutzer kann einen beliebigen Stringwert angeben. Standardmäßig ist der String leer.
- „bitness“ – Bitanzahl der Plattform. Bekannte Werte sind „32“ und „64“. Der Nutzer kann einen beliebigen Stringwert angeben. Standardmäßig ist der String leer.
- "wow64" – Emulation von Windows 32 in Windows 64. Ein boolescher Wert, der standardmäßig auf „false“ gesetzt ist.

ChromeDriver kann den Wert „userAgent“ aus „clientHints“ auf den folgenden Plattformen ableiten: „Android“, „Chrome OS“, „Chromium OS“, „Fuchsia“, „Linux“, „macOS“ und „Windows“. Daher kann dieser Wert weggelassen werden.

Wenn das Wörterbuch „clientHints“ weggelassen wird (Legacy-Modus), versucht ChromeDriver, „clientHints“ aus „userAgent“ abzuleiten. Diese Funktion ist aufgrund interner Unklarheiten beim Wertformat „userAgent“ nicht zuverlässig.

Die Smartphones und Tablets, die im Bereich „Mobile Emulation“ verfügbar sind, finden Sie im DevTools-Quellcode.

Java

Map<String, Object> deviceMetrics = new HashMap<>();
deviceMetrics.put("width", 360);
deviceMetrics.put("height", 640);
deviceMetrics.put("pixelRatio", 3.0);
Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19");
Map<String, Object> clientHints = new HashMap<>();
clientHints.put("platform", "Android");
clientHints.put("mobile", true);
mobileEmulation.put("clientHints", clientHints);
ChromeOptions chromeOptions = new ChromeOptions(); chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation); WebDriver driver = new ChromeDriver(chromeOptions);

Ruby

mobile_emulation = {
   "deviceMetrics" => { "width" => 360, "height" => 640, "pixelRatio" => 3.0 },
   "userAgent" => "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
   "clientHints" => { "platform" => "Android", "mobile" => true}
}
caps = Selenium::WebDriver::Remote::Capabilities.chrome("chromeOptions" => mobile_emulation)
driver = Selenium::WebDriver.for :remote, url: 'http://localhost:4444/wd/hub', desired_capabilities: caps

Python

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
mobile_emulation = {
   "deviceMetrics": { "width": 360, "height": 640, "pixelRatio": 3.0 },
   "userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
   "clientHints": {"platform": "Android", "mobile": True} }
chrome_options = Options()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(chrome_options = chrome_options)

Beispiel für eine vollständige Konfiguration der mobilen Emulation:

JSON

"mobileEmulation": {
  "userAgent": "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/111.0.0.0 Mobile Safari/537.36",
  "deviceMetrics": {
     "mobile": true,
     "touch": true,
     "width": 412,
     "height": 823,
     "pixelRatio": 1.75
  },
  "clientHints": {
     "brands": [
        {"brand": "Google Chrome", "version": "111"},
        {"brand": "Chromium", "version": "111"}
     ],
     "fullVersionList": [
        {"brand": "Google Chrome", "version": "111.0.5563.64"},
        {"brand": "Chromium", "version": "111.0.5563.64"}
     ],
     "platform": "Android",
     "platformVersion": "11",
     "architecture": "arm",
     "model": "lorem ipsum (2022)"
     "mobile": true,
     "bitness": "32",
     "wow64": false
  }
}

Unterschied zwischen Mobilgeräteemulation und echten Geräten

Es ist hilfreich, Websites auf einem Computer mit mobiler Emulation zu testen, aber dies ist keine perfekte Nachbildung der Tests auf dem tatsächlichen Gerät. Es gibt einige wichtige Unterschiede, darunter:

Mobilgeräte haben oft eine andere GPU, was zu großen Leistungsänderungen führen kann.
Die UI für Mobilgeräte wird nicht emuliert. Insbesondere das Ausblenden der Adressleiste wirkt sich auf die Seitenhöhe aus.
Pop-ups zur Behebung von Mehrdeutigkeit (bei denen Sie eines von mehreren Touch-Zielen auswählen) werden nicht unterstützt.
Viele Hardware-APIs (z. B. das orientationchange-Ereignis) sind nicht verfügbar.