📖 教程目录
共 19 个章节,覆盖移动端 Web 开发的核心知识点。点击章节进入学习。
移动端 Web 开发概述
移动端 vs PC 端差异、四大核心挑战、跨端方案全景
Viewport 视口与适配基础
三大视口概念、meta viewport 配置、JS 获取设备信息
触摸事件处理
Touch Events 体系、Pointer Events、滑动方向判断、事件触发顺序
300ms 点击延迟与解决方案
点击延迟根源、viewport 方案、touch-action CSS 方案、点击穿透
移动端布局方案
Flexbox、Grid、流式布局、百分比布局
rem / vw 响应式适配方案
rem 计算原理、vw/vh 方案、配合 calc()、postcss-px-to-viewport
1px 边框问题
7 种解决方案对比(border-image、box-shadow、transform scale、SVG 等)
安全区域适配(刘海屏 / 底部指示条)
env(safe-area-inset-*)、padding 方案、全面屏适配
软键盘处理
visualViewport API、scrollIntoView、fixed 定位问题、iOS vs Android 差异
滚动优化
惯性滚动、下拉刷新、滚动穿透(body scroll lock)、pull-to-refresh
移动端性能优化
首屏加载、图片优化(WebP、懒加载)、渲染性能、RAIL 模型
手势操作
单击、双击、长按、滑动、缩放(pinch)、旋转检测
移动端调试技巧
Chrome DevTools、Safari Web Inspector、vConsole、Charles 抓包
兼容性处理
iOS Safari 坑、Android 厂商差异、微信内置浏览器
Hybrid 开发与 JSBridge 通信
12 个避坑指南、schema URL、JS Bridge 实现原理、微信 JSSDK
移动端音视频处理
自动播放策略、playsinline、video 全屏控制、X5 内核适配
PWA 渐进式 Web 应用
Service Worker、离线缓存、manifest.json、添加到桌面、缓存策略
Flutter 移动端开发
Flutter vs RN vs Web、WebView 混合开发、10 个避坑指南
移动端 Web 开发检查清单
H5 上线前完整检查清单(HTML/Meta、CSS、JS、性能、真机测试)