Diese Seite wurde von der Cloud Translation API übersetzt.

Mobilgeräte-Emulation

Chrome ermöglicht Nutzern, Chrome auf einem Mobilgerät (z. B. einem Nexus 7-Tablet oder einem iPhone 5) mit der Desktopversion von Chrome zu emulieren, indem die Funktion „Mobile Emulation“ in den Chrome-Entwicklertools aktiviert wird. Diese Funktion beschleunigt die Webentwicklung und ermöglicht Entwicklern, schnell zu testen, wie eine Website auf einem Mobilgerät dargestellt wird, ohne dass ein echtes Gerät erforderlich ist. ChromeDriver kann Mobile Emulation auch über die Funktion „mobileEmulation“ aktivieren, die durch einen Wörterbuchwert angegeben wird.

Wie im Steuerfeld „Entwicklertools-Emulation“ gibt es in ChromeDriver zwei Möglichkeiten, die „Mobile Emulation“ zu aktivieren: durch Angabe eines bekannten Geräts oder durch Angabe einzelner Geräteattribute. Das Format des „mobileEmulation“-Wörterbuchs hängt von der gewünschten Methode ab.

Bekanntes Mobilgerät angeben

Wenn Sie Mobile Emulation mit einem bestimmten Gerätenamen aktivieren möchten, muss das Wörterbuch „mobileEmulation“ einen „deviceName“ enthalten. Verwenden Sie einen gültigen Gerätenamen aus dem Bereich Entwicklertools-Emulation als Wert für „deviceName“.

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 Mobile Emulation auch durch Angabe einzelner Attribute aktivieren. Um Mobile Emulation auf diese Weise zu aktivieren, kann das Wörterbuch "mobileEmulation" die Wörterbücher "deviceMetrics" und "clientHints" sowie einen "userAgent"-String enthalten. Die folgenden Gerätemesswerte müssen im Wörterbuch „deviceMetrics“ angegeben werden:

"width": die Breite des Gerätebildschirms in Pixeln
"height" - die Höhe des Gerätebildschirms in Pixeln.
"pixelRatio" – Pixelverhältnis des Geräts
"touch" – gibt an, ob Touch-Ereignisse emuliert werden sollen Der Standardwert ist „true“ und kann normalerweise weggelassen werden.
"mobile" – Gibt an, ob sich der Browser wie ein mobiler User-Agent verhalten muss, z. B. Overlay-Bildlaufleisten, Ausgabe von Ausrichtungsereignissen oder Verkleinern des Inhalts, damit er in den Darstellungsbereich passt. Der Standardwert ist „true“ und kann normalerweise weggelassen werden.

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

"platform" - das Betriebssystem. Dabei kann es sich entweder um einen bekannten Wert („Android“, „Chrome OS“, „Chromium OS“, „Fuchsia“, „Linux“, „macOS“, „Windows“) handeln, der genau mit dem Wert übereinstimmt, der von Chrome auf der jeweiligen Plattform zurückgegeben wird, oder es kann sich um einen benutzerdefinierten Wert handeln. Dieser Wert ist obligatorisch.
"mobile" – gibt an, ob der Browser eine mobile oder Desktop-Ressourcenversion anfordern soll. Wenn Chrome auf einem Android-Smartphone ausgeführt wird, wird dieser Wert in der Regel auf „true“ gesetzt. In Chrome auf einem Android-Tablet wird dieser Wert auf „false“ gesetzt. Chrome auf einem Desktop-Gerät setzt diesen Wert ebenfalls auf "false". Anhand dieser Informationen können Sie eine realistische Emulation angeben. Dieser Wert ist obligatorisch.
Die verbleibenden Einträge sind optional und können weggelassen werden, sofern sie nicht für den Test relevant sind:
- "brands" – Liste der Paare aus Marke und Hauptversion Wenn keine Angabe gemacht wird, verwendet der Browser seine eigenen Werte.
- "fullVersionList" – Liste der Paare aus Marke und Version. Er wurde ausgelassen. Der Browser verwendet seine eigenen Werte.
- "platformVersion" – Version des Betriebssystems Die Standardeinstellung ist ein leerer String.
- "model": Gerätemodell Die Standardeinstellung ist ein leerer String.
- "Architecture" (Architektur) – CPU-Architektur. Bekannte Werte sind "x86" und "arm". Der Nutzer kann einen beliebigen Stringwert angeben. Die Standardeinstellung ist ein leerer String.
- "bitness" – die Bitrate der Plattform. Bekannte Werte sind „32“ und „64“. Der Nutzer kann einen beliebigen Stringwert angeben. Die Standardeinstellung ist ein leerer String.
- "wow64": Emulation von Fenster 32 in Windows 64 Ein boolescher Wert, der standardmäßig auf "false" gesetzt ist.

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

Wenn das Wörterbuch „clientHints“ weggelassen wird (Legacy-Modus), versucht ChromeDriver, die „clientHints“ von „userAgent“ abzuleiten. Diese Funktion funktioniert jedoch aufgrund interner Mehrdeutigkeiten beim Wertformat von „userAgent“ nicht zuverlässig.

Die Smartphones und Tablets, die im Steuerfeld „Mobile Emulation“ verfügbar sind, finden Sie im Quellcode der Entwicklertools.

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 Mobilgeräteemulationskonfiguration:

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
  }
}

Unterschiede zwischen der Emulation für Mobilgeräte und echten Geräten

Es kann hilfreich sein, eine mobile Website auf einem Desktop-Computer mit der mobilen Emulation zu testen. Die Tester sollten jedoch beachten, dass es viele kleine Unterschiede gibt, wie z. B.:

eine völlig andere GPU, was zu großen Leistungsänderungen führen kann.
die mobile Benutzeroberfläche nicht emuliert wird (insbesondere wirkt sich das Ausblenden der URL-Leiste auf die Seitenhöhe aus)
Ein Auswahl-Pop-up, in dem Sie eines von einigen Berührungszielbereichen auswählen, wird nicht unterstützt.
Viele Hardware-APIs (z. B. das Ereignis „Ausrichtungsänderung“) sind nicht verfügbar.