手机浏览器打不开本地file:// html文件是因系统限制：ios完全禁止，android chrome 80+收紧策略；须用本地服务器（如python3 -m http.server）访问http://；viewport缺失或错误导致显示异常；css需适配移动端；https页面禁用http资源。
手机浏览器打不开本地 file:// HTML 文件
直接双击打开的 HTML 文件，在 iOS Safari 或 Android Chrome 里大概率空白或报错，不是代码问题，是系统限制。iOS 完全禁止 file:// 协议加载本地资源（包括 JS、CSS、图片），Android 从 Chrome 80+ 也开始收紧——哪怕文件在内部存储里，file:// 加载也会被拦截或跨域拒绝。
- 别用文件管理器点开 HTML，改用本地服务器预览
- 最简方案：终端进项目目录，运行
python3 -m http.server 8000，然后手机浏览器访问http://[电脑IP]:8000/xxx.html - 如果用了
fetch、XMLHttpRequest或引入了本地 JSON/JS 文件，这些请求在file://下必然失败，换成http://才能走通
viewport meta 标签缺失或写错
页面能打开但显示极小、横向滚动、文字糊成一片？八成是没加或写错了 <meta name="viewport">。手机浏览器默认按 980px 宽度渲染，不缩放，没这行就等于告诉手机“按桌面尺寸画”。
- 必须加在
里，且放在所有 CSS 之前 - 标准写法只有这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别写
user-scalable=no，现代 iOS 会忽略它，还可能触发 Safari 的兼容模式降级 - 如果用了
maximum-scale=1.0，双指缩放会被禁，测试时容易误判为“显示异常”
CSS 中用了 PC 端独占特性
某些 CSS 在桌面浏览器跑得好好的，一到手机上就消失或错位，常见于媒体查询失效、单位误用、Flex/Grid 兼容性断层。
-
rem基准依赖html { font-size: 16px }，但 iOS Safari 在横屏时可能重算根字号，建议用vw或 JS 动态设font-size - 写了
@media (min-width: 768px)却忘了手机竖屏宽度才 375–414px，这种断点根本不会命中 - 用了
display: grid但没加-webkit-前缀（iOS 15.4 以前的 Safari 对部分 Grid 属性支持不全） - 背景图用了
background-attachment: fixed，iOS 上直接失效，视觉上像“没加载出来”
HTTPS 混合内容（Mixed Content）被拦截
页面部署在 HTTPS 网站上，但 HTML 里写了 http:// 的资源链接（比如图片、JS、字体），Safari 和 Chrome 会静默屏蔽，控制台只报 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'，页面看起来就是缺图、无交互。
立即学习“前端免费学习笔记（深入）”；
- 检查所有
src、href、url()里的协议，统一改成//（协议相对）或直接https:// - 本地开发时用
http://localhost是安全的，但一旦推到 GitHub Pages / Vercel 等 HTTPS 平台，所有http://都得砍掉 - 连内联
<style>@import url("http://...")</style>都会被拦，这种写法本身就不该存在
