必须添加正确的viewport meta标签，即，否则手机浏览器会按桌面宽度（约980px）渲染，导致内容缩成一团、横向滚动失效或ios safari显示为空白。
viewport meta 标签没加或写错了
手机浏览器默认按桌面宽度渲染页面（通常是 980px 左右），如果没告诉它“请按设备宽度来显示”，内容就会被缩成一小团，或者横向滚动条卡死——根本不是“不显示”，而是“显示了但你找不到”。
常见错误现象：页面在手机上只显示左上角一丁点，左右拖不动；或整个页面特别小，文字糊成一片；或 iOS Safari 完全空白（其实是渲染了但缩得太小）
- 必须加这行，放在
里：<meta name="viewport" content="width=device-width, initial-scale=1"> - 别写成
width=375或user-scalable=no（后者会让用户无法双指缩放，无障碍体验差） - 不要漏掉
initial-scale=1，否则某些安卓 WebView 可能默认缩放为 0.8
CSS 中用了固定像素宽高，没适配视口单位
写了 width: 1200px 或 height: 800px 这种值，在手机上直接溢出或撑破布局，轻则内容不可见，重则触发浏览器的“安全模式”导致部分元素不渲染。
使用场景：轮播图容器、卡片、弹窗、表单字段等常见模块
立即学习“前端免费学习笔记（深入）”；
- 优先用
max-width: 100%替代固定width，图片和视频也加height: auto - 字体大小别只用
px，改用rem或em，配合根字号动态调整 - 慎用
position: fixed+top: -100px这类偏移——在 iOS Safari 中可能被裁剪或消失
JavaScript 动态插入内容但没触发重排或兼容移动端事件
比如用 innerHTML 写入 DOM 后，发现手机上空着一块；或者绑定 click 事件，PC 上好使，手机点没反应——不是没显示，是没正确激活。
常见错误现象：Vue/React 渲染后白屏；jQuery append() 后元素存在但不可见；点击按钮无反馈
- 确保 JS 执行时 DOM 已就绪，别在
里直接跑操作 DOM 的代码 - 移动端 click 有 300ms 延迟，若监听的是
click但没加touchstart兜底，可能误判为“没响应” - 用
display: none切换元素时，注意某些安卓浏览器对transform: scale(0)渲染异常，建议统一用opacity: 0; visibility: hidden
服务器或构建工具把移动端资源拦截/压缩错了
不是前端代码问题，而是 HTML 文件本身没发到手机浏览器手里——比如 Nginx 配置了 User-Agent 过滤，或者 Webpack 把 index.html 压缩时删掉了关键 meta 标签。
性能 / 兼容性影响：iOS 15+ 和 Chrome Android 对缺失 viewport 的页面越来越严格，可能直接降级为“文档模式”渲染
- 用手机浏览器访问时，打开开发者工具（Safari 开远程调试，Chrome 用 USB 调试），看 Network 面板里
index.html是否返回 200 且内容完整 - 检查响应头是否有
X-Content-Type-Options: nosniff导致 MIME 类型误判，尤其当服务端返回text/plain而非text/html - 如果是静态托管（如 GitHub Pages、Vercel），确认没有配置错
_redirects或headers规则，把 HTML 当成其他类型处理了
最常被忽略的是：改完代码没清手机浏览器缓存，或者本地预览用的是 file:// 协议——很多手机浏览器会禁用 viewport 解析或 JS 执行。真要验证，得部署到 HTTP(S) 环境里看。
