Playwright 常用操作

需求：

手机分辨率为 1260*2720，需要在浏览器上进行模拟，参数需要填多少

1. 关键概念解析

术语	说明	示例（针对你的手机）
物理分辨率	屏幕实际像素数量	1260×2720
逻辑分辨率（CSS像素）	浏览器使用的虚拟像素	需根据DPR计算
设备像素比（DPR）	物理像素 / 逻辑像素	常见值：2.0 / 3.0
视口（Viewport）	浏览器可视区域	需设置 <meta name="viewport">

2. 计算浏览器模拟参数

(1) 假设设备像素比（DPR）

• 如果手机 DPR=3（如高端安卓机）：

  逻辑宽度 = 1260 / 3 = 420
  逻辑高度 = 2720 / 3 ≈ 907
  

  浏览器模拟输入：420×907（需勾选 DPR=3）

• 如果手机 DPR=2（如普通机型）：

  逻辑宽度 = 1260 / 2 = 630
  逻辑高度 = 2720 / 2 = 1360
  

  浏览器模拟输入：630×1360（需勾选 DPR=2）

(2) 如何确认DPR？

• 手机实测：

  在手机浏览器中运行以下JS代码：

  console.log("DPR:", window.devicePixelRatio);
  

3. 浏览器开发者工具操作步骤

Chrome：

1. 打开开发者工具（F12） → 点击 切换设备工具栏。
2. 选择 自定义设备 → 输入以下参数：
   • 宽度：420（DPR=3时）或 630（DPR=2时）
   • 高度：907（DPR=3时）或 1360（DPR=2时）
   • 设备像素比：选择对应的 2或 3
   • 用户代理：设置为目标手机型号（如 Galaxy S23）
3. 刷新页面即可生效。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。