Trang này được dịch bởi Cloud Translation API.

Mô phỏng thiết bị di động

Chrome cho phép người dùng mô phỏng Chrome trên thiết bị di động từ máy tính của Chrome bằng cách bật chế độ thiết bị bằng Công cụ của Chrome cho nhà phát triển. Tính năng này tăng tốc độ phát triển web, cho phép các nhà phát triển nhanh chóng thử nghiệm cách một trang web hiển thị trên thiết bị di động mà không cần thiết bị thực. ChromeDriver có thể cũng mô phỏng các thiết bị bằng tính năng "mobileEm phỏng" (Mô phỏng thiết bị di động) chức năng, được chỉ định bằng một giá trị từ điển.

Giống như trong Công cụ cho nhà phát triển, có hai cách trong ChromeDriver để bật tính năng Mô phỏng thiết bị di động:

Chỉ định một thiết bị đã biết
Chỉ định các thuộc tính riêng của thiết bị

Định dạng của "mobileMô phỏng" dựa vào phương thức cần dùng.

Chỉ định một thiết bị di động đã biết

Để cho phép mô phỏng thiết bị với một thiết bị cụ thể, tính năng "mobileEm phỏng" (Mô phỏng thiết bị di động) từ điển phải chứa "deviceName". Sử dụng tên thiết bị hợp lệ trong phần cài đặt Thiết bị mô phỏng cho DevTools làm giá trị cho "deviceName".

Ảnh chụp màn hình chế độ cài đặt Thiết bị

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);

Hồng ngọc

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())

Chỉ định các thuộc tính riêng của thiết bị

Bạn có thể bật tính năng Mô phỏng thiết bị di động bằng cách chỉ định từng thuộc tính riêng lẻ. Chiến lược phát hành đĩa đơn "mobileMô phỏng" từ điển có thể chứa deviceMetrics, clientHints từ điển và chuỗi userAgent.

Bạn phải chỉ định các chỉ số thiết bị sau đây trong thuộc tính "deviceMetrics" từ điển:

"width" – chiều rộng tính bằng pixel của màn hình thiết bị
"chiều cao" – chiều cao tính bằng pixel của màn hình thiết bị
"pixelRatio" – tỷ lệ pixel của thiết bị
"chạm" – việc mô phỏng các sự kiện chạm. Giá trị mặc định là true và thường có thể bị bỏ qua.
"điện thoại di động" - liệu trình duyệt có phải hoạt động như một tác nhân người dùng trên thiết bị di động hay không (thanh cuộn lớp phủ, phát các sự kiện về hướng, thu nhỏ nội dung cho vừa với khung nhìn, v.v.). Giá trị mặc định là true và thường có thể bị bỏ qua.

Phần tử "clientHints" từ điển có thể có các mục nhập sau:

"platform" - hệ điều hành. Đây có thể là giá trị đã biết ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), khớp chính xác với giá trị mà Chrome chạy trên nền tảng đã cho trả về hoặc có thể là giá trị do người dùng xác định. Giá trị này là bắt buộc.
"điện thoại di động" - việc trình duyệt sẽ yêu cầu phiên bản tài nguyên dành cho thiết bị di động hay máy tính. Thông thường, Chrome chạy trên điện thoại di động có Android sẽ đặt giá trị này thành true. Chrome trên thiết bị Android dành cho máy tính bảng đặt giá trị này thành false. Chrome trên thiết bị máy tính cũng đặt giá trị này thành false. Bạn có thể sử dụng thông tin này để chỉ định một mô phỏng thực tế. Giá trị này là bắt buộc.
Các mục còn lại là không bắt buộc và có thể bỏ qua trừ phi chúng phù hợp với thử nghiệm:
- "thương hiệu" – danh sách các cặp phiên bản chính / thương hiệu. Nếu bạn bỏ qua, trình duyệt sẽ sử dụng các giá trị riêng của trình duyệt đó.
- "fullVersionList" – danh sách các cặp thương hiệu / phiên bản. Giá trị này đã bỏ qua việc trình duyệt sử dụng các giá trị riêng của trình duyệt.
- "platformVersion" – Phiên bản hệ điều hành. Giá trị mặc định là chuỗi trống.
- "model" – mẫu thiết bị. Giá trị mặc định là chuỗi trống.
- "kiến trúc" – Cấu trúc CPU. Giá trị đã biết là "x86" và "arm". Người dùng có thể tuỳ ý cung cấp bất kỳ giá trị chuỗi nào. Giá trị mặc định là chuỗi trống.
- "độ bit" - bit nền tảng. Giá trị đã biết là "32" và "64". Người dùng có thể tuỳ ý cung cấp bất kỳ giá trị chuỗi nào. Giá trị mặc định là chuỗi trống.
- "wow 64" - Mô phỏng Windows 32 trên Windows 64 Một giá trị boolean mặc định là false.

ChromeDriver có thể suy ra "userAgent" giá trị từ "clientHints" trên các nền tảng sau: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows". Do đó, bạn có thể bỏ qua giá trị này.

Nếu "clientHints" từ điển bị bỏ qua (chế độ cũ) ChromeDriver hoạt động hiệu quả nhất để suy ra "clientHints" từ "userAgent". Tính năng này không đáng tin cậy do những điểm không rõ ràng nội bộ về "userAgent" giá trị.

Các điện thoại và máy tính bảng có trong bảng Mô phỏng thiết bị di động có thể trong mã nguồn DevTools.

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);

Hồng ngọc

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)

Ví dụ về cấu hình mô phỏng thiết bị di động đầy đủ:

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

Sự khác biệt giữa chế độ mô phỏng thiết bị di động và thiết bị thực

Sẽ rất hữu ích nếu bạn thử nghiệm các trang web trên máy tính bằng cách mô phỏng trên thiết bị di động, nhưng đó không phải là bản sao hoàn hảo của thử nghiệm trên thiết bị thực tế. Có một số điểm khác biệt chính, bao gồm:

Thiết bị di động thường có GPU khác, có thể dẫn đến những thay đổi lớn về hiệu suất.
Giao diện người dùng thiết bị di động không được mô phỏng (cụ thể là việc ẩn thanh địa chỉ sẽ ảnh hưởng đến chiều cao trang).
Cửa sổ bật lên để phân biệt (nơi bạn chọn một trong một vài đích chạm) không được hỗ trợ.
Nhiều API phần cứng (ví dụ: sự kiện orientationchange) không dùng được.