正确答案是：viewport meta标签必须写为，且静态置于最顶部，拼写准确、缺一不可，否则移动端将按980px默认视口渲染，导致文字极小、横向滚动、按钮点不中等异常。
viewport meta 标签写错等于没做响应式
几乎所有移动端显示异常——文字极小、横向滚动、按钮点不中——都源于这行缺失或参数错误：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是可选项，是现代移动浏览器渲染的开关。
-
width=device-width必须拼写准确，写成device_width或width=deviceWidth就失效 - 别加
maximum-scale=1或user-scalable=no，除非是 Kiosk 场景；否则会禁用双指缩放，违反 WCAG 可访问性要求 - 该标签必须放在
最顶部，早于任何 CSS/JS；否则 iOS Safari 可能先按桌面宽度渲染再重排，造成闪屏 - 旧版 UC、QQ 浏览器对
initial-scale解析不稳定，所以不能依赖 scale 值做布局计算（比如用 JS 读window.devicePixelRatio再算 rem）
rem 基准不能靠 JS 动态设完再改
用document.documentElement.style.fontSize在DOMContentLoaded里设 rem 基准，会导致闪屏：先按浏览器默认 16px 渲染，再重绘。用户看到文字突然变大/变小。
- 真正可靠的做法是把计算逻辑前置到 HTML 解析阶段：在
最顶部加内联<style></style>，用calc()直接写死，例如：html { font-size: calc(100vw / 375 * 16px); }（以 375px 设计稿为基准） - 避免用 JS 读取
window.innerWidth再 setStyle——横竖屏切换、双击放大后，JS 获取的宽可能滞后或不准 - iOS Safari 10 以下不支持
vw单位用于font-size，若用4.266667vw设根字体，需 fallback 到 JS 动态设置
flex 和 grid 别混用同一容器
Flexbox 适合一维排列（导航栏、卡片横排），Grid 适合二维区域划分（仪表盘、后台管理页）。混用会导致行为不可控，尤其在 Android 4.4 WebView（Chromium 30）里，flex-wrap和grid-gap可能被忽略。
- 导航栏用 Flex：小屏
flex-direction: column，大屏@media (min-width: 768px) { flex-direction: row; } - 内容区用 Grid：
grid-template-columns: minmax(300px, 1fr) 2fr;让左栏最小 300px、右栏占两份，比纯百分比更可控 - 不要在
display: flex容器里再套display: grid子元素做主布局——语义混乱且调试困难 - iOS 12 以下会吃掉子元素的
min-width；绕过方式是给该子元素加flex-shrink: 0，或改用width: max-content+flex: 0 0 auto
媒体查询只按 width 断点会漏掉横屏和小高度场景
很多页面在 iPad 横屏下文字堆叠、表单被键盘顶飞，就是因为只写了@media (min-width: 1024px)，却没考虑orientation和max-height。
- 横竖屏区分必须显式写：
@media (min-width: 768px) and (orientation: landscape)，而不是仅靠宽度 - 弹窗、登录页这类高度敏感组件，加
@media (max-height: 600px)单独调padding和font-size - 别用
max-device-width：已废弃，它查的是设备物理宽度，而实际应基于视口宽度（max-width） - 断点必须按视口宽度而非设备类型设——缺一环即导致特定设备体验失效
真机测试时，iOS Safari 和老 Android WebView 的兼容细节远比文档写的多；viewport 和根字体这两步一旦出错，后面所有布局都会漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
