viewport meta 标签必须正确书写，否则导致移动端缩放异常、文字过小或布局错乱；最简写法为 ，需置于 最顶部，且不可重复或冲突。
viewport meta 标签必须写对
网页在手机上缩放异常、文字过小或布局错乱，90% 是因为 <meta name="viewport"> 缺失或参数错误。它不是可选的“优化项”，而是移动端渲染的强制开关。
必须放在 内，且越靠前越好（浏览器解析到就立即生效）。
- 最简可用写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
width=device-width表示视口宽度 = 设备屏幕物理宽度（单位是 CSS 像素），没有它，桌面版默认 980px 视口会强行缩小整个页面 -
initial-scale=1.0禁止初始缩放，避免 iOS Safari 自动把文字放大 - 别加
user-scalable=no—— 这是 WCAG 可访问性违规项，iOS 和 Android 最新版浏览器已部分忽略该指令，但会触发警告或降级行为
CSS 必须用相对单位和媒体查询配合
<meta name="viewport"> 只解决“视口尺寸”问题，不解决“内容怎么排”。脱离 CSS 的 @media 查询或 flex/grid，光靠 meta 标签毫无意义。
- 字体、间距、容器宽度优先用
rem、em、%、vw，避免固定px（高 DPI 屏幕上会糊） - 图片必须设
max-width: 100%和height: auto，否则横向滚动无法避免 - 断点别只按设备猜：
@media (max-width: 768px)适配平板竖屏，@media (max-width: 480px)适配小屏手机，但更推荐“内容驱动”：文字挤在一起了再加断点 - 真机测试时注意：横竖屏切换、软键盘弹出会改变视口高度，
vh单位可能跳变
Flexbox 布局比 float 更可靠
过去用 float + clear 实现多列，在小屏上容易崩；现代项目直接用 display: flex，一维弹性更可控。
- 父容器加
display: flex+flex-wrap: wrap，子项自动换行 - 用
flex: 1 1 300px控制基础宽度与伸缩性，再配合min-width: 200px防止过窄 - 移动端可改
flex-direction: column，让导航、卡片垂直堆叠 - 避免在 flex 容器里混用
float或position: absolute，会导致布局脱节
模板继承链里 viewport 容易被覆盖
实际项目中，<meta name="viewport"> 错误往往藏在模板继承链里——比如 CMS 主题模板里已有 viewport，但子模板又重复写了一次，参数冲突导致失效。
- 检查最终 HTML 源码（右键 → 查看页面源代码），确认只有一个
<meta name="viewport">，且位置在最顶部 - 若用 Vue/React，确保
index.html的 meta 是唯一入口，不要在组件内用document.head.appendChild()动态插入 - 某些构建工具（如 Vite 插件、Next.js Head 组件）会自动注入 meta，需核对是否与手写冲突
vh 的不可靠性**。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
