移动端页面文字小、按钮点不准、横向滚动，八成因viewport标签缺失或错误：必须置于最开头且仅一次，核心参数width=device-width和initial-scale=1.0缺一不可；需配合rem适配、禁止硬编码尺寸、图片加max-width:100%等协同生效。
移动端页面一打开就文字小、按钮点不准、横向滚动——八成是 viewport 标签没写对，或者压根没写。
viewport 必须放在
浏览器解析到 <meta name="viewport"> 就立刻应用规则，晚了会先按默认 980px 渲染首屏，再缩放导致抖动甚至重排。常见翻车点包括：
- 被 SSR 框架注入的注释或占位符挤到
<meta charset>后面 - 用 JS 动态创建并
append，完全不生效 - 误写在
里，Chrome 和 Safari 都忽略
验证是否生效：真机或 Chrome DevTools 切 iPhone 模拟器后，在 Elements 面板看 元素的 clientWidth——iPhone 13 应接近 390，不是 980。
width=device-width 和 initial-scale=1.0 是唯二不可省的核心参数
缺一不可，否则 iOS Safari 和安卓 WebView 都 fallback 到 980px，文字小得看不清。老版本 iOS（如 iOS 9）只写 width=device-width 时仍可能忽略缩放逻辑。
别写固定值：
-
width=375：横屏时直接崩，安卓部分设备无视该值 -
maximum-scale=1.0或user-scalable=no：违反 WCAG 2.1 可访问性标准，视力障碍用户无法放大，系统「更大字体」设置被绕过
最低可用配置就是：</meta name="viewport" content="width=device-width, initial-scale=1.0">
写了 viewport，但 rem 字体还是糊？检查 font-size 是否被硬编码覆盖
很多项目在 CSS 里写了 html { font-size: 62.5%; }，却没配合 rem 计算逻辑，导致所有 rem 值错乱。这种问题只在真机 DPR > 1（如 iPhone 的 2x/3x 屏）时才暴露。
更稳妥的做法是内联 calc()：
<style>html{font-size:calc(100vw / 375 * 16px);}</style>
以 375px 设计稿为基准，避免 JS 动态设置引发闪屏；若设计稿宽度不固定，改用媒体查询兜底，例如：
@media (min-width: 414px) { html { font-size: 17.6px; } }
viewport 不是万能的，它必须和 CSS 单位、图片适配协同生效
viewport 只管“画布怎么铺开”，布局、字体、图片适配还得靠配套：
- CSS 中禁用硬编码尺寸：删掉
width: 375px、font-size: 16px，该用%、rem、vw的地方必须换 - 图片加
max-width: 100%; height: auto;，否则撑爆容器引发横向滚动 - 媒体查询断点按内容临界点设，不是抄设备参数：比如两列卡片在 783px 开始重叠，就该用
@media (max-width: 782px)
最常被忽略的是：viewport 写对了，但 或 上写了 font-size: 62.5% 却没配合 rem 计算——这种问题只在真机 DPR > 1 时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
