如何解决Chrome移动模拟器中新开子浏览器实例不显示移动端视图问题

阿华AIGC实验室

2026-5-21

解决Chrome移动模拟器自动化时新窗口不显示移动端视图的方案

嘿，这个问题我之前帮好几个同行解决过——Chrome DevTools的移动模拟器设置默认是不会自动继承到新打开的窗口的，所以新页面才会跳回桌面视图。下面给你几个针对自动化场景的靠谱解决办法：

1. 切换新窗口后复用移动端配置

当点击链接打开新窗口后，你需要主动切换到新窗口的句柄，然后重新设置对应的移动端设备参数（视口尺寸、user-agent等）。以Selenium Python为例，代码示例如下：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 初始化带移动端模拟的driver
mobile_emulation = {"deviceName": "iPhone 12"}
options = webdriver.ChromeOptions()
options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(options=options)

# 打开目标官网并点击链接
driver.get("你的公司官网地址")
driver.find_element(By.LINK_TEXT, "目标链接").click()

# 切换到新打开的窗口
windows = driver.window_handles
driver.switch_to.window(windows[-1])

# 为新窗口重新应用移动端模拟（部分场景下需要，确保万无一失）
driver.execute_cdp_cmd("Emulation.setDeviceMetricsOverride", {
    "width": 390,
    "height": 844,
    "deviceScaleFactor": 3,
    "mobile": True
})
driver.execute_cdp_cmd("Network.setUserAgentOverride", {
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
})

# 可选：刷新页面确保网站识别到移动端环境
driver.refresh()

2. 用CDP全局启用移动模拟（一劳永逸）

如果你的自动化流程里所有窗口都需要移动端视图，可以在启动浏览器时就通过Chrome DevTools协议(CDP)设置全局设备模拟，这样所有新打开的窗口都会自动继承该配置。示例代码：

from selenium import webdriver

driver = webdriver.Chrome()

# 设置全局移动端设备参数
driver.execute_cdp_cmd("Emulation.setDeviceMetricsOverride", {
    "width": 390,
    "height": 844,
    "deviceScaleFactor": 3,
    "mobile": True,
    "screenOrientation": {"type": "portrait", "angle": 0}
})

# 设置全局移动端User-Agent
driver.execute_cdp_cmd("Network.setUserAgentOverride", {
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
})

# 后续打开的所有窗口都会自动应用移动端视图
driver.get("你的公司官网地址")
driver.find_element(By.LINK_TEXT, "目标链接").click()