跳转到内容

在移动端测试

在 builder 中使用响应式视口切换器进行快速检查,然后发布并在真实设备上测试任何涉及移动端专属行为的功能。

Proyecta 的移动端测试分为两个层面:builder 内置的响应式预览,以及在已发布 URL 上进行的真实设备测试。

预览面板的地址栏中包含一个视口切换器:

模式尺寸
Desktop完整窗口宽度
Tablet768 × 1024
Mobile375 × 667

在编辑过程中随时切换,以便尽早发现布局问题。这是发现明显响应式 bug(内容溢出、网格错乱、按钮无法点击)的最快方式。

视口切换器只能模拟尺寸——它无法模拟触摸输入、真实网络延迟、移动端浏览器的特殊行为或平台专属功能。对于你真正关心的内容(触摸交互、安装提示、推送通知、摄像头、GPS),请在真实设备上进行测试:

  1. 发布你的应用到其 *.proyecta.live 子域名
  2. 在手机浏览器中打开该 URL
  3. 如果你已添加 PWA 支持,选择 Add to Home Screen,并测试已安装状态下的体验
  4. 逐一走查你关心的使用流程

只有在真实设备上才能发现的问题

Section titled “只有在真实设备上才能发现的问题”
  • 点击目标大小 —— 手指比鼠标指针大得多
  • 固定元素(sticky elements) —— 视口单位在移动端浏览器地址栏收缩时表现不同
  • 表单输入 —— 自动填充、键盘类型、自动补全
  • iOS Safari 的特殊问题 —— 100vh 异常、弹性滚动、fixed 定位
  • 推送通知权限流程 —— 仅在通过 HTTPS 提供的已发布域名的顶层浏览器标签页中有效;在 builder 的预览面板内不会触发(即使预览本身已通过 HTTPS 提供)
  • 性能 —— 真实(更低端)硬件上的实际表现
  • 使用手机的开发者工具。 macOS 上的 Safari 可以连接移动端 Safari 进行实时调试;Chrome 可以连接 Android Chrome。
  • 也要测试横屏模式。 大多数开发者只测试竖屏,容易遗漏横屏下的 bug。
  • 开启低电量模式进行测试。 动画和定时器的行为会有所不同。
  • 在真实 iPhone 上测试 PWA 推送。 iOS 上的推送通知仅在通过 Safari 安装的 PWA 中有效。