手机直接打开index.html常空白，因安卓/iOS的file://协议不支持相对路径CSS/JS、import及fetch等操作，同源策略拦截导致资源加载失败；需改用http-server或Termux/python起本地HTTP服务绕过限制。
手机直接打开 index.html 文件为什么经常空白？
因为大多数安卓/iOS 文件管理器或浏览器不支持本地 file:// 协议下加载相对路径的 CSS/JS，更不认 import、fetch('./data.json') 这类跨文件操作。不是 HTML 写错了，是运行环境根本没给你权限。
- 安卓上用微信/QQ 点开 HTML 文件 → 自动用内置 WebView 打开，但禁止读取同目录下的
style.css - iOS 的 Files App 点开 HTML → Safari 会加载，但控制台报
Failed to load resource: frame load interrupted，本质是同源策略拦截 - 哪怕写了个最简单的
<h1>Hello</h1>，如果用了<link rel="stylesheet" href="main.css">，大概率只显示文字、没样式
用 http-server 在手机本地启一个真服务（推荐）
不依赖网络，不传云，不装 IDE，5 分钟搞定。核心是让手机访问自己电脑起的本地 HTTP 服务，绕过 file:// 限制。
- 电脑端装 Node.js 后执行：
npm install -g http-server - 进你的 HTML 所在文件夹，运行：
http-server -p 8080 - 手机和电脑连同一个 Wi-Fi，在浏览器地址栏输：
http://192.168.x.x:8080（查电脑 IP 用ipconfig或ifconfig） - 此时所有相对路径、ES Module、
fetch()都正常——因为走的是http://协议
安卓不用电脑：用 Termux + python3 -m http.server
Termux 是安卓上最接近 Linux 终端的工具，适合临时调试或离线场景。注意 Python 版本必须 ≥3.7，且要授存储权限。
- 安装 Termux 后先运行：
pkg update && pkg install python - 用
termux-setup-storage授权访问内部存储 - 把 HTML 文件放
~/storage/shared/your-project/下，然后执行：cd ~/storage/shared/your-project && python3 -m http.server 8000 - 手机浏览器打开：
http://localhost:8000—— 不用切 Wi-Fi，纯本地 - 缺点：不支持 HTTP/2、无缓存控制、大文件传输慢；优点：完全离线、零配置
iOS 没有 Termux 怎么办？
iOS 被锁死得更严，没有命令行，也没有文件系统直通。唯一稳定方案是用支持本地 HTTP 服务的第三方 App，别信“HTML 查看器”这类名字带“查看”的——它们基本还是走 file://。
立即学习“前端免费学习笔记（深入）”；
- 推荐
Working Copy（Git 客户端）：支持把本地文件夹当作 Git 仓库，内置 Web Preview 功能，自动起服务并返回可点击的http://链接 - 或
Scriptable+ 小脚本：用它调用 iOS 的HTTPServer模块，但需写几行 JS，且每次都要手动启动 - 千万别用“文件”App 直接点开 HTML：Safari 会尝试加载，但只要含任何外部资源，就静默失败，连控制台都看不到
真正麻烦的从来不是“怎么打开”，而是“打开之后资源链路是否完整”。本地预览这一步，协议比语法重要得多。
