# 移动端 Web 开发最佳实践教程

> 全面的移动端 H5 开发教程，涵盖从基础适配到进阶工程化的完整知识体系。在线访问：https://www.web123.top

## 核心文件

- index.html: 首页/目录页，包含 hero 区域和 19 个章节的导航卡片
- pages/: 章节独立页面文件夹，每个章节一个独立的 HTML 文件
- css/style.css: 全局样式，暗色主题，响应式布局
- js/main.js: 主交互脚本（侧边栏高亮、滚动监听、导航下拉等）
- js/components/menu-components.js: 导航菜单 Web Component
- js/components/content-components.js: 内容区域 Web Component
- js/plugins/code-runner.js: 代码运行引擎插件
- js/plugins/syntax-highlight.js: 代码语法高亮插件
- sitemap.xml: 搜索引擎站点地图（含所有独立页面 URL）
- robots.txt: 搜索引擎爬虫配置

## 教程章节

0. 移动端开发概述 — 移动端 vs PC 端差异、四大核心挑战、跨端方案全景
1. Viewport 视口与适配基础 — 三大视口概念、meta viewport 配置
2. 触摸事件处理 — Touch Events 体系、Pointer Events、滑动方向判断
3. 300ms 点击延迟与解决方案 — 延迟根源、touch-action 方案、点击穿透
4. 移动端布局方案 — Flexbox、Grid、流式布局、百分比布局
5. rem / vw 响应式适配方案 — rem 计算原理、vw/vh 方案、postcss-px-to-viewport
6. 1px 边框问题 — 7 种解决方案对比（transform scale、box-shadow、SVG 等）
7. 安全区域适配 — 刘海屏、底部指示条适配、env(safe-area-inset-*)
8. 软键盘处理 — 键盘弹出/收起监听、布局适配、iOS vs Android 差异
9. 滚动优化 — 惯性滚动、下拉刷新、滚动穿透、pull-to-refresh
10. 移动端性能优化 — 首屏加载、图片优化（WebP、懒加载）、渲染性能
11. 手势操作 — 单击、双击、长按、滑动、缩放（pinch）、旋转检测
12. 移动端调试技巧 — Chrome DevTools、vConsole、Charles 抓包
13. 兼容性处理 — iOS Safari 坑、Android 厂商差异、微信内置浏览器
14. Hybrid/JSBridge — 12 个避坑指南、schema URL、JS Bridge 实现原理
15. 移动端音视频处理 — 自动播放策略、playsinline、X5 内核适配
16. PWA 渐进式 Web 应用 — Service Worker、离线缓存、manifest.json
17. Flutter 移动端开发 — Flutter vs RN vs Web、WebView 混合开发
18. 开发检查清单 — H5 上线前完整检查清单

## 技术栈

- 纯 HTML + CSS + JavaScript（零框架依赖）
- Web Components 自定义元素
- CSS 自定义属性（变量）主题系统
- 响应式设计，支持桌面端和移动端
- 多页面架构，每个章节独立 HTML 页面