playwright-mobile-viewport-simulations

Playwright 移动端视口模拟指南与说明 1. 设置视口尺寸 使用 `page.setViewportSize()` 方法模拟特定移动设备的屏幕尺寸。例如： ```javascript await page.setViewportSize({ width: 375, height: 667 }); ``` 2. 模拟设备类型 通过 `context.newPage()` 时传入设备参数，自动应用对应的视口、用户代理和触摸支持： ```javascript const iPhone = playwright.devices['iPhone 13']; const page = await context.newPage(iPhone); ``` 3. 启用触摸与移动设备标志 确保模拟环境包含 `isMobile: true` 和 `hasTouch: true`，以正确触发移动端行为。 4. 用户代理（User Agent） 设备模拟会自动设置匹配的 User Agent。如需自定义，可在设备参数中覆盖： ```javascript const device = playwright.devices['iPhone 13']; device.userAgent = '自定义 User Agent'; ``` 5. 设备像素比（DPR） 高精度屏幕（如 Retina）需设置正确的 `deviceScaleFactor`，默认由所选设备自动配置。 6. 地理位置与传感器（可选） 部分测试需模拟 GPS 或方向传感器，可通过 `context.addInitScript()` 注入 mock 数据。 7. 旋转屏幕 使用 `page.emulateMedia({ viewport: { isLandscape: true } })` 切换横屏模式。 8. 清除模拟状态 测试结束后调用 `page.close()` 或创建新上下文以重置视口和模拟参数。 注意：始终在真实移动设备上进行最终验证，模拟器仅用于开发阶段快速调试。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本

相关资产