✅ 移动端 Web 开发检查清单

以下是移动端 H5 页面上线前的完整检查清单，逐项确认避免踩坑。

HTML / Meta 检查

  • 已添加 viewport meta 标签，且 width=device-width
  • 设置了 viewport-fit=cover（如需适配全面屏）
  • 页面设置了正确的 lang 属性
  • <input> 的 font-size 不小于 16px（防 iOS 缩放）
  • 已配置 format-detection 禁止数字识别为电话

CSS 样式检查

  • 使用 Flexbox 或 Grid 布局，避免固定宽度
  • 字体和间距使用 rem/vw 或百分比，不使用固定 px
  • 图片设置了 max-width: 100% 防止溢出
  • 已添加 -webkit-tap-highlight-color: transparent
  • 滚动容器添加了 -webkit-overflow-scrolling: touch
  • 动画使用 transform/opacity，避免触发重排
  • 已适配全面屏安全区域（safe-area-inset）

JavaScript 检查

  • 使用 touch 或 pointer 事件处理交互
  • 已处理 300ms 点击延迟（viewport 或 touch-action）
  • 弹窗/遮罩打开时禁止背景滚动（防穿透）
  • 使用 requestAnimationFrame 做动画循环
  • 使用 IntersectionObserver 做懒加载
  • 事件监听添加了 { passive: true } 优化滚动
  • 微信环境下的特殊逻辑已处理（如分享、授权）
  • JSBridge 调用有超时兜底和降级方案
  • 视频添加了 playsinline 和 x5-video-player-type
  • 音视频自动播放有用户手势兜底方案

性能检查

  • 图片使用 WebP 格式（带 JPG 兜底），已做懒加载
  • CSS/JS 已压缩，启用 Gzip 或 Brotli
  • 非首屏 JS 使用 defer 或动态 import
  • 首屏关键 CSS 已内联
  • 合理使用浏览器缓存策略
  • 静态资源使用 CDN
  • 已注册 Service Worker 实现离线缓存（PWA）
  • 配置了 manifest.json 支持添加到桌面

真机测试检查

  • iPhone（Safari + 微信）和 Android（Chrome + 微信）均已测试
  • 全面屏（刘海屏）显示正常
  • 横竖屏切换布局正常
  • 软键盘弹出/收起无布局异常
  • 弱网环境下页面可用（loading 状态正常）
  • 页面滚动流畅，无卡顿感
  • PWA 离线模式下页面可正常访问
  • JSBridge 在目标 App WebView 中功能正常
  • 音视频在各平台（iOS/Android/微信）播放正常
全文完