# mobile-web-tutorial

**Repository Path**: wujindong2018/mobile-web-tutorial

## Basic Information

- **Project Name**: mobile-web-tutorial
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-13
- **Last Updated**: 2026-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 移动端 Web 开发教程

[![在线预览](https://img.shields.io/badge/在线预览-web123.top-07c160?style=flat-square)](https://www.web123.top)
[![Gitee 镜像](https://img.shields.io/badge/Gitee-wujindong2018/mobile--web--tutorial-c71d23?style=flat-square)](https://gitee.com/wujindong2018/mobile-web-tutorial)

全面的移动端 H5 开发教程，涵盖从基础适配到进阶工程化的完整知识体系。

## 📚 内容大纲

### 适配与布局
- **Viewport** — meta viewport 配置与原理
- **布局方案** — Flexbox、Grid、流式布局等移动端布局方案
- **适配单位** — rem、vw/vh 等移动端适配单位详解
- **1px 问题** — 移动端 1px 边框问题的多种解决方案
- **安全区域** — 刘海屏、底部指示条安全区域适配

### 交互与体验
- **触摸事件** — touchstart/touchmove/touchend 及 300ms 延迟解决
- **软键盘** — 键盘弹出时的布局处理
- **滚动优化** — 惯性滚动、下拉刷新、滚动穿透等
- **手势** — 滑动、缩放、长按等手势交互

### 进阶与工程
- **性能优化** — 首屏加载、图片优化、渲染性能
- **调试** — 移动端调试技巧与工具
- **兼容性** — 多平台兼容处理方案
- **Hybrid/JSBridge** — Hybrid 开发与原生通信，含 12 个避坑指南
- **音视频** — 移动端音视频处理
- **PWA** — 渐进式 Web 应用
- **Flutter** — Flutter vs RN vs Web 对比，WebView 混合开发及 10 个避坑指南

### 其他
- **检查清单** — 移动端 H5 上线前完整检查清单

## 🌐 在线访问

| 平台 | 地址 |
|------|------|
| 主站 | [https://www.web123.top](https://www.web123.top) |
| GitHub Pages | 待配置 |
| Gitee Pages | 待配置 |

## 🚀 快速开始

直接用浏览器打开 `index.html` 即可浏览完整教程。

## 🛠 技术栈

- 纯 HTML + CSS + JavaScript
- 响应式设计，支持桌面端和移动端浏览
- 无框架依赖

## 📁 项目结构

```
mobile-web-tutorial/
├── index.html      # 主页面
├── css/
│   └── style.css   # 样式文件
├── js/
│   └── main.js     # 交互脚本
├── llms.txt        # AI/LLM 可读的项目配置与内容概览
├── LICENSE         # MIT 开源许可
└── README.md
```

## 📄 开源许可

本项目采用 **CC BY-NC-SA 4.0**（知识共享-署名-非商业使用-相同方式共享），允许非商业用途的分享与改编，但**禁止商用**。

根目录的 `llms.txt` 遵循 [llms.txt 标准](https://llmstxt.org/)，AI 编程助手和 LLM 工具可读取此文件快速了解项目结构和内容大纲。