Diese Seite wurde von der Cloud Translation API übersetzt.

Mobilgeräte-Emulation

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

Wie im Bereich „DevTools-Emulation“ gibt es in ChromeDriver zwei Möglichkeiten, die Mobile-Emulation zu aktivieren: durch Angabe eines bekannten Geräts oder durch Festlegen einzelner Geräteattribute. Das Format von „mobileEmulation“ -Wörterbuch hängt davon ab, welche Methode gewünscht ist.

Bekanntes Mobilgerät angeben

Um die Mobile-Emulation für einen bestimmten Gerätenamen zu aktivieren, Wörterbuch muss einen "deviceName" enthalten. Verwenden Sie einen gültigen Gerätenamen aus dem Bereich DevTools-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 die Mobile-Emulation auch aktivieren, indem Sie einzelne Attribute angeben. Um Mobile Emulation auf diese Weise zu aktivieren, enthält die Funktion Wörterbuch kann "deviceMetrics" enthalten und "clientHints" Wörterbücher und ein „userAgent“ . Die folgenden Gerätemesswerte müssen unter "deviceMetrics" angegeben werden. Wörterbuch:

"width" – Breite des Gerätebildschirms in Pixeln
"height" – Höhe des Gerätebildschirms in Pixeln
„pixelRatio“ – Pixelverhältnis des Geräts
"berühren" – Gibt an, ob Touch-Ereignisse emuliert werden sollen. Der Standardwert ist „true“ und kann in der Regel weggelassen werden.
"mobil" - Gibt an, ob sich der Browser als mobiler User-Agent verhalten muss (Overlay-Bildlaufleisten, Ausrichtungsereignisse ausgeben, Inhalte an den Darstellungsbereich anpassen usw.). Der Standardwert ist „true“ und kann in der Regel weggelassen werden.

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

„Plattform“ - das Betriebssystem. Dabei kann es sich entweder um einen bekannten Wert wie „Android“, „Chrome OS“, „Chromium OS“, „Fuchsia“, „Linux“, „macOS“ oder „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.
"mobil" – Gibt an, ob der Browser eine mobile oder Desktop-Ressourcenversion anfordern soll. Normalerweise setzt Chrome auf einem Mobiltelefon mit Android diesen Wert auf "true". Chrome auf einem Tablet mit Android-Geräten legt diesen Wert auf „false“ fest. Auf Computern wird dieser Wert ebenfalls auf „false“ gesetzt. Mit diesen Informationen können Sie eine realistische Emulation angeben. Dieser Wert ist erforderlich.
Die übrigen Einträge sind optional und können weggelassen werden, sofern sie für den Test nicht relevant sind: <ph type="x-smartling-placeholder">
- „marken“ – Liste der Paare von Marke und Hauptversion Wenn keine Angabe gemacht wird, verwendet der Browser seine eigenen Werte.
- "fullVersionList" – Liste der Marken / Version-Paare Wird dies weggelassen, verwendet der Browser seine eigenen Werte.
- „platformVersion“ – Betriebssystemversion. Die Standardeinstellung ist ein leerer String.
- „Modell“ – Gerätemodell Die Standardeinstellung ist ein leerer String.
- "Architektur" – CPU-Architektur Bekannte Werte: "x86" und „Arm“. Der Nutzer kann einen beliebigen Stringwert angeben. Die Standardeinstellung ist ein leerer String.
- "Gebraten" – Plattform-Bitbarkeit. Bekannte Werte: „32“ und „64“. Der Nutzer kann einen beliebigen Stringwert angeben. Die Standardeinstellung ist ein leerer String.
- „wow64“ - Emulation von Windows 32 in Windows 64. Ein boolescher Wert, der standardmäßig auf „false“ gesetzt ist.

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

Wenn „clientHints“ Wörterbuch wird weggelassen (Legacy-Modus) ChromeDriver leitet die "clientHints" so gut wie möglich ab. von „userAgent“. Diese Funktion funktioniert jedoch aufgrund der internen Ambiguität von „userAgent“ nicht zuverlässig. Format des Wertes.

Die Smartphones und Tablets, die im Bereich „Mobile Emulation“ verfügbar sind, finden Sie im Entwicklertools-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 einer vollständigen Emulationskonfiguration für Mobilgeräte:

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 Mobilgeräteemulation und echten Geräten

Das Testen einer mobilen Website auf einem Desktop mithilfe der mobilen Emulation kann nützlich sein. Tester sollten sich jedoch bewusst sein, dass es viele kleine Unterschiede gibt, wie zum Beispiel:

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