📱 移动端 Web 开发最佳实践

01

移动端 Web 开发概述

移动端 vs PC 端差异、四大核心挑战、跨端方案全景

02

Viewport 视口与适配基础

三大视口概念、meta viewport 配置、JS 获取设备信息

03

触摸事件处理

Touch Events 体系、Pointer Events、滑动方向判断、事件触发顺序

04

300ms 点击延迟与解决方案

点击延迟根源、viewport 方案、touch-action CSS 方案、点击穿透

05

移动端布局方案

Flexbox、Grid、流式布局、百分比布局

06

rem / vw 响应式适配方案

rem 计算原理、vw/vh 方案、配合 calc()、postcss-px-to-viewport

07

1px 边框问题

7 种解决方案对比（border-image、box-shadow、transform scale、SVG 等）

08

安全区域适配（刘海屏 / 底部指示条）

env(safe-area-inset-*)、padding 方案、全面屏适配

09

软键盘处理

visualViewport API、scrollIntoView、fixed 定位问题、iOS vs Android 差异

10

滚动优化

惯性滚动、下拉刷新、滚动穿透（body scroll lock）、pull-to-refresh

11

移动端性能优化

首屏加载、图片优化（WebP、懒加载）、渲染性能、RAIL 模型

12

手势操作

单击、双击、长按、滑动、缩放（pinch）、旋转检测

13

移动端调试技巧

Chrome DevTools、Safari Web Inspector、vConsole、Charles 抓包

14

兼容性处理

iOS Safari 坑、Android 厂商差异、微信内置浏览器

15

Hybrid 开发与 JSBridge 通信

12 个避坑指南、schema URL、JS Bridge 实现原理、微信 JSSDK

16

移动端音视频处理

自动播放策略、playsinline、video 全屏控制、X5 内核适配

17

PWA 渐进式 Web 应用

Service Worker、离线缓存、manifest.json、添加到桌面、缓存策略

18

Flutter 移动端开发

Flutter vs RN vs Web、WebView 混合开发、10 个避坑指南

19

移动端 Web 开发检查清单

H5 上线前完整检查清单（HTML/Meta、CSS、JS、性能、真机测试）