在移动端测试
在 builder 中使用响应式视口切换器进行快速检查,然后发布并在真实设备上测试任何涉及移动端专属行为的功能。
Proyecta 的移动端测试分为两个层面:builder 内置的响应式预览,以及在已发布 URL 上进行的真实设备测试。
在 builder 中进行响应式预览
Section titled “在 builder 中进行响应式预览”预览面板的地址栏中包含一个视口切换器:
| 模式 | 尺寸 |
|---|---|
| Desktop | 完整窗口宽度 |
| Tablet | 768 × 1024 |
| Mobile | 375 × 667 |
在编辑过程中随时切换,以便尽早发现布局问题。这是发现明显响应式 bug(内容溢出、网格错乱、按钮无法点击)的最快方式。
在真实设备上测试
Section titled “在真实设备上测试”视口切换器只能模拟尺寸——它无法模拟触摸输入、真实网络延迟、移动端浏览器的特殊行为或平台专属功能。对于你真正关心的内容(触摸交互、安装提示、推送通知、摄像头、GPS),请在真实设备上进行测试:
- 发布你的应用到其
*.proyecta.live子域名 - 在手机浏览器中打开该 URL
- 如果你已添加 PWA 支持,选择 Add to Home Screen,并测试已安装状态下的体验
- 逐一走查你关心的使用流程
只有在真实设备上才能发现的问题
Section titled “只有在真实设备上才能发现的问题”- 点击目标大小 —— 手指比鼠标指针大得多
- 固定元素(sticky elements) —— 视口单位在移动端浏览器地址栏收缩时表现不同
- 表单输入 —— 自动填充、键盘类型、自动补全
- iOS Safari 的特殊问题 ——
100vh异常、弹性滚动、fixed 定位 - 推送通知权限流程 —— 仅在通过 HTTPS 提供的已发布域名的顶层浏览器标签页中有效;在 builder 的预览面板内不会触发(即使预览本身已通过 HTTPS 提供)
- 性能 —— 真实(更低端)硬件上的实际表现
- 使用手机的开发者工具。 macOS 上的 Safari 可以连接移动端 Safari 进行实时调试;Chrome 可以连接 Android Chrome。
- 也要测试横屏模式。 大多数开发者只测试竖屏,容易遗漏横屏下的 bug。
- 开启低电量模式进行测试。 动画和定时器的行为会有所不同。
- 在真实 iPhone 上测试 PWA 推送。 iOS 上的推送通知仅在通过 Safari 安装的 PWA 中有效。