移动端布局失效主因是viewport标签缺失或CSS固定宽度覆盖响应式结构；须确保head中唯一存在width=device-width的viewport标签，并用媒体查询、flex/grid及rem单位适配屏幕。
移动端布局失效的常见原因
HTML5 网站模板在手机上显示错乱，大概率不是模板本身“不支持响应式”，而是关键响应式机制被移除或覆盖了。最常被误删的是 标签——没有它，浏览器会以桌面宽度（通常是 980px）渲染页面，再缩放显示，导致字体小、按钮挤、图片变形。
另一个高频问题是 CSS 中写了固定宽度（如 width: 1200px）或使用了未加 @media 保护的绝对定位/浮动布局，直接压垮了移动端流式结构。
必须保留并检查的 viewport 元素
打开 HTML 文件的 区域，确认存在且仅存在一个如下标签：
注意三点：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width是核心，缺它就失去响应式基础 - 如果项目需要用户缩放（如老年用户），请删掉
user-scalable=no，否则 iOS Safari 可能禁用双指放大 - 不要重复写多个
，后写的会覆盖前写的，容易引发意外行为
CSS 中适配移动端的关键写法
响应式不是靠 JS 控制，而是靠 CSS 媒体查询 + 弹性单位协同生效。修改时优先检查以下位置：
- 查找所有
width值为固定像素（如width: 960px）的容器，在其上方或同一规则中补上@media (max-width: 768px)块，并设为width: 100%或max-width: 100% - 把
px字体大小批量替换为rem或em，例如font-size: 16px→font-size: 1rem，再在html标签上用媒体查询动态调基准值 - 避免用
float布局主结构，改用display: flex或display: grid，它们天然支持移动端方向切换（如flex-direction: column）
示例：让导航栏在小屏下垂直堆叠
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
.nav-item {
width: 100%;
margin-bottom: 8px;
}
}
调试时别忽略的细节
Chrome DevTools 模拟器只是参考，真机测试才能暴露问题：
- iOS Safari 对
vh单位有兼容问题（地址栏收放会触发重算），慎用height: 100vh做全屏容器 - 部分安卓 WebView 不识别
picture+srcset，图片响应式建议 fallback 到img+width: 100%+height: auto - 自定义字体（
@font-face）若未声明font-display: swap，会导致移动端首屏文字长时间空白
真正卡住的往往不是大框架，而是某个 position: absolute 的弹窗没加 max-width: 100vw，或者某张背景图用了 background-size: cover 却没设 background-attachment: scroll，在 iOS 上滑动时撕裂。
