直接双击打开 HTML 文件失效，是因为 file:// 协议下浏览器（Chrome 90+ 等）出于安全策略禁用 matchMedia change 事件、忽略 viewport 标签、限制 fetch 和 localStorage；必须使用 HTTP 服务（如 Live Server、npx serve 或 python3 -m http.server）在 http:// 或 https:// 协议下运行。
为什么直接双击打开 HTML 文件会失效
file:// 协议下，Chrome 90+ 和新版 Safari/Edge 会禁用或降级多项响应式关键能力：matchMedia 的 change 事件不触发、vh 单位计算异常、viewport meta 标签被忽略、fetch 和 localStorage 受限。这不是 bug，是浏览器主动的安全策略——没有 HTTP 上下文，就无法信任媒体查询环境。
必须起本地 HTTP 服务的三个实操要点
离线测试的前提是让页面跑在 http:// 或 https:// 协议下。推荐以下方式（任选其一）：
-
npx serve：无需安装，执行后默认监听http://localhost:5000，根目录放好index.html即可 -
python3 -m http.server 8000：Mac/Linux 自带，Windows 需确认已装 Python 3，访问地址为http://192.168.x.x:8000（替换为你电脑的局域网 IP） - VS Code 的
Live Server插件：右键 HTML 文件 → “Open with Live Server”，自动打开http://localhost:5500
注意：所有方式都要求 index.html 中已包含正确且位于 <head> 最前面的 <meta name="viewport" content="width=device-width, initial-scale=1">。
真机访问时最常卡住的两个环节
即使起了服务，手机仍打不开？大概率卡在这两处：
立即学习“前端免费学习笔记（深入）”；
- 防火墙拦截：macOS 要关掉「系统设置 > 网络 > 防火墙」；Windows 要在「Windows Defender 防火墙 > 允许应用通过防火墙」中勾选 Python 或 Node.js
- IP 地址填错：手机浏览器必须输入你电脑的**局域网 IP**（不是
127.0.0.1），可在终端运行ipconfig（Win）或ifconfig | grep "inet "（Mac/Linux）查到形如192.168.1.100的地址
验证是否成功：电脑浏览器访问 http://localhost:8000 能看到页面，且手机在同一 Wi-Fi 下访问 http://192.168.1.100:8000 也能加载，才算通路建立完成。
模拟器里测不出但真机会崩的三件事
DevTools 设备模拟器能帮你快速看断点和布局，但它完全模拟不了这些真实交互细节：
- 软键盘弹出时是否顶起
position: fixed的底部操作栏（iOS 尤其明显） -
input[type="number"]在安卓上是否唤起数字键盘，而非全键盘 - 滚动时
fixed元素是否随视口偏移（很多安卓 WebView 有此问题）
这些必须真机访问才能暴露。别省这一步——哪怕只用一台 iPhone 和一台安卓机交叉测一次，也比十次模拟器点击更有价值。
