viewport标签未生效导致页面在手机上缩成一团、文字模糊、可左右拖动，根本原因是浏览器按980px宽度渲染，必须确保viewport标签内容正确、置于head最开头且仅出现一次。
viewport 标签没生效或位置错了
页面在手机上缩成一团、文字糊、左右可拖动，八成是 <meta name="viewport"> 没起作用。浏览器按 980px 宽度渲染，根本没当移动页面处理。
必须满足三个硬条件：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">这一行要写对，不能加user-scalable=no或maximum-scale=1.0 - 必须放在
最开头，不能被 JS 动态插入，也不能被框架 SSR 漏掉 - 不能出现两次——后一个会覆盖前一个，但首次渲染已按错误配置执行完
常见翻车点：width=375 或 width=1200 这类固定值，在折叠屏、iPad 分屏、横屏弹键盘时全崩；真机测试时 iOS Safari 很可能直接忽略你动态 append 的 viewport。
file:// 协议下所有资源加载都失败
手机点开 HTML 文件就白屏、图片/JS/CSS 全报 404，不是代码问题，是浏览器安全策略拦截了 file:// 协议下的跨文件请求。
iOS 完全禁止；Android Chrome 80+ 起收紧限制；微信/QQ 内置浏览器也一样拦。错误信息典型长这样：Access to script at 'file:///xxx.js' from origin 'null' has been blocked。
解法只有走 HTTP 协议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 电脑端：终端进项目根目录，运行
python3 -m http.server 8000，手机访问http://[电脑IP]:8000/xxx.html - 纯手机：用 Acode（安卓）或 ServerDog（iOS），它们内置 HTTP 服务，“预览”按钮一按就起
- 注意：哪怕只写了
import { foo } from './utils.js'，file://下 ES 模块也解析不了——协议层就不支持
rem 基准靠媒体查询硬编码会失效
用 @media (max-width: 767px) { html { font-size: 14px; } } 这种写法，在 iPad Pro（逻辑宽度 1024px）、安卓平板（800px）、折叠屏展开后（1200px）全不命中。
真正可控的是 JS 动态计算：
function setRem() {
const baseWidth = 375;
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = scale * 16 + 'px';
}
setRem();
window.addEventListener('resize', setRem);
window.addEventListener('orientationchange', setRem);
两个关键坑：
- iOS 键盘弹出时
clientWidth不变，但视口被压缩，rem 基准“虚高”，输入框可能被顶出屏幕——得监听focus临时调小font-size - 某些安卓 WebView 不触发
resize，得配合matchMedia('(min-width: 0px)')监听变化
CSS 和 JS 在移动端有隐性兼容断层
代码在桌面跑得好好的，一到手机上就消失、错位、不响应，大概率踩中了这些隐形坑：
-
display: grid在 iOS 15.4 以前需加-webkit-前缀，否则部分属性直接不生效 -
background-attachment: fixed在 iOS 上完全失效，视觉上像“背景图没加载” - 写了
@media (min-width: 768px)，但手机竖屏宽度才 375–414px，这个断点根本不会命中 - JS 中选择器 ID 拼错，比如 HTML 是
id="mobile-menu"，JS 却写成querySelector("#mobile=menu")，返回null，事件绑定失败，控制台可能只报Cannot read property 'addEventListener' of null，容易被忽略
真机全场景测试不可省——模拟器看不到键盘弹出、分屏、折叠状态下的真实表现，尤其是 iOS Safari 的字体重算和 rem 行为，跟桌面 Chrome 差异极大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
