下面给你一份**《手机触摸版（一）——环境搭建》的成体系教程**，偏向实战 + 新手可落地，适合做成技术文档 / 教程系列 / 博客专栏。

手机触摸版（一）

一、环境搭建

本系列将从 环境 → 适配 → 交互 → 优化 → 发布 逐步讲解
本篇重点：把开发环境一次性搭好

一、开发目标说明

手机触摸版通常指：

  • 📱 移动端 H5 页面
  • 📱 手机浏览器访问
  • 📱 支持触摸事件（点击 / 滑动 / 缩放）
  • 📱 适配不同屏幕尺寸

本教程以 H5（HTML + CSS + JavaScript） 为核心，不依赖原生 App。

二、基础开发环境准备

1️⃣ 操作系统

支持以下系统：

  • Windows 10 / 11
  • macOS
  • Linux（Ubuntu / CentOS 均可）

2️⃣ 必备软件清单

✅ 浏览器（必须）

推荐：

  • Google Chrome（首选）
  • Edge（Chromium 内核）

用途：

  • 移动端模拟
  • 调试触摸事件
  • 查看 CSS 适配效果

✅ 代码编辑器

推荐二选一：

  • VS Code（强烈推荐）
  • WebStorm（付费）

VS Code 必装插件：

  • Live Server（本地热更新）
  • HTML CSS Support
  • JavaScript (ES6) code snippets

三、前端运行环境（Node.js）

1️⃣ 安装 Node.js

推荐版本：

  • Node.js LTS（18.x 或 20.x）

安装完成后验证：

node -v
npm -v

2️⃣ 创建项目目录

mkdir mobile-touch
cd mobile-touch

初始化项目：

npm init -y

四、本地开发服务器

方案一：Live Server（新手推荐）

  • VS Code 插件
  • 右键 index.html → Open with Live Server
  • 自动刷新页面

方案二：Vite（推荐进阶）

npm create vite@latest mobile-touch
cd mobile-touch
npm install
npm run dev

优点：

  • 启动快
  • 更接近真实项目结构
  • 适合后期扩展

五、基础项目结构

推荐结构👇

mobile-touch/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── assets/
    └── images/

六、移动端基础 HTML 模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />

  <!-- 移动端核心 meta -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no" />

  <title>手机触摸版</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div class="app">
    手机触摸版页面
  </div>

  <script src="js/main.js"></script>
</body>
</html>

⚠️ viewport 是移动端适配的核心，必须有。

七、手机触摸调试方法

1️⃣ Chrome 开发者工具

  • 打开 DevTools（F12）
  • 点击 📱 手机图标
  • 选择设备（iPhone / Android）

支持：

  • 触摸模拟
  • 分辨率切换
  • 网络限速

2️⃣ 真机调试（推荐）

同一局域网下：

http://电脑IP:端口

例如：

http://192.168.1.10:5173

八、基础样式初始化（移动端）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont;
}

.app {
  width: 100%;
  height: 100%;
}

九、本阶段完成效果

完成后你将拥有：

✅ 可在手机浏览器访问的页面
✅ 支持触摸操作的开发环境
✅ 可本地调试 + 真机测试
✅ 标准移动端项目结构

下一篇预告

👉 《手机触摸版（二）》

  • touchstart / touchmove / touchend
  • 点击延迟问题
  • 手势滑动基础实现

如果你是打算：

  • 🎮 做触摸游戏
  • 📱 做管理后台移动版
  • 🧩 做 WebApp / H5 应用

告诉我，我可以直接按你的目标继续写后续章节。