关键在三处：视口控制、触摸响应、本地协议限制；必须写对viewport标签、用ontouchstart替代onclick、禁用file://协议改用本地服务运行。
直接用 HTML5 写手机端页面，不是加个“mobile”属性或者装个插件就能搞定的事——关键在三处：视口控制、触摸响应、本地协议限制。漏掉任一，页面在手机上就可能白屏、卡顿、点不动、图片不显示，甚至根本连不上 API。
必须写对 <meta name="viewport">，否则所有响应式都白搭
这个标签不是可选的装饰，是移动端渲染的开关。没它，Chrome for Android 和 Safari for iOS 都会按 980px 宽度模拟桌面模式，文字小得看不见，横向滚动停不下来。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>里，且不能重复或拼错（比如写成device_width） - 别加
user-scalable=no—— 屏幕阅读器用户和视力障碍者需要缩放，iOS 13+ 已默认禁用该值 - 如果页面内容偏窄（比如卡片宽度固定为 320px），
initial-scale=1.0可能导致左右留白；此时可改用width=320，但需同步确保容器max-width: 320px且居中
别信 onclick，手机上点按钮有 300ms 延迟
这是浏览器为双击缩放预留的判断窗口。原生 click 在安卓 Chrome、iOS Safari 上都会卡顿，尤其轮播图、游戏按钮、表单提交等高频操作场景下感知明显。
- 优先用
ontouchstart替代onclick，并立刻调用event.preventDefault()阻止默认行为 - 若需兼容 PC 端（比如调试时用鼠标点），可用
addEventListener('touchstart', handler, { passive: false })+addEventListener('click', handler)双注册，但注意passive: false是必须的，否则preventDefault()无效 - 更稳妥的做法是引入
fastclick库（仅 1.2KB），在初始化时执行FastClick.attach(document.body)，自动劫持并消除延迟
file:// 协议下几乎所有 HTML5 API 都会失效
双击打开本地 index.html 看起来最方便，但 Chrome、Edge、Firefox 全部禁止 file:// 下的 fetch()、localStorage、<video> 加载相对路径、Service Worker 注册——这不是 bug，是安全策略。
立即学习“前端免费学习笔记（深入）”；
- 错误现象示例：
Access to script at 'file:///xxx.js' from origin 'null' has been blocked、DOMException: The request is not allowed by the user agent or the platform in the current context - 开发阶段必须起本地服务：VS Code 装 Live Server 插件一键启动；命令行可用
npx serve（Node）或python3 -m http.server 8000（Python） - 切忌用
--disable-web-security启动 Chrome 调试——它会绕过 CORS，但也会让 localStorage/sessionStorage 表现异常，且无法模拟真实用户环境
真正麻烦的不是怎么写，而是哪些地方“看起来正常却实际不可靠”：比如 <time datetime="2026-04-10">今天</time> 在 JS 里调 new Date(el.dateTime) 没问题，但写成 datetime="today" 就彻底失效；又比如 <canvas> 在 iOS Safari 中若未显式设置 width/height 属性（而非仅 CSS），绘图会模糊拉伸——这些细节不测真机，光看模拟器永远发现不了。
