viewport meta标签必须写对，否则页面在移动端缩成一团、文字过小、按钮点不中；正确写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，须置于<head>最顶部，缺一不可且不可动态插入。
viewport meta 标签必须写对，否则页面直接失效
移动端页面缩在左上角、文字小得看不清、按钮点不中——八成是 <meta name="viewport"> 没配对。它不是装饰，是浏览器渲染的开关。
必须写全这行，且放在 <head> 最顶部（早于任何 CSS/JS）：<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width必须拼写准确，device_width或width=deviceWidth都无效 - 缺
initial-scale=1.0时，iOS Safari 默认按 980px 渲染再缩放，导致 touch 事件错位、字体模糊 - 别加
maximum-scale=1.0和user-scalable=no，除非是 Kiosk 场景；否则违反可访问性要求，禁用双指缩放 - 旧版 UC、QQ 浏览器对
initial-scale解析不稳定，不能依赖它做 JS 布局计算（比如用window.devicePixelRatio算 rem）
rem 基准要前置到 HTML 解析阶段，别等 DOM 加载完再设
用 JS 在 DOMContentLoaded 里执行 document.documentElement.style.fontSize = '16px'，会导致闪屏：先按默认 16px 渲染，再重绘变大/变小。
真正可靠的做法是在 <head> 内联 <style>，用 calc() 直接算死根字号：html { font-size: calc(100vw / 375 * 16px); }（以 375px 设计稿为基准）
立即学习“前端免费学习笔记（深入）”；
- Safari 旧版不支持
calc(100vw / 375 * 1rem)这种混单位写法，必须统一用px - 避免用 JS 读
window.innerWidth动态设置——横竖屏切换或双击放大后，值可能滞后或不准 - 如果设计稿基准不是 375px，把公式里的
375换成对应宽度即可
Flex 和 Grid 别混用同一容器，一维和二维布局要分清
Flexbox 适合一维排列（导航栏、卡片横排），Grid 适合二维区域划分（仪表盘、后台页）。混用会导致行为不可控，尤其在 Android 4.4 WebView（Chromium 30）里，flex-wrap 和 grid-gap 可能被忽略。
- 导航栏用 Flex：
@media (min-width: 768px) { flex-direction: row; }，小屏保持column - 内容区用 Grid：
grid-template-columns: minmax(300px, 1fr) 2fr;，比纯百分比更可控 - 不要在
display: flex容器里再套display: grid子元素做主布局——语义混乱、调试困难 - iOS 12 及更早系统会吃掉
flex: 1容器里子元素的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） - 断点按视口宽度设，不是设备型号；一套逻辑覆盖所有视口，而不是“猜 iPhone 还是 Pixel”
真机测试时最容易被忽略的是：iOS Safari 10 以下不支持 vw 单位用于 font-size，若用了 4.266667vw 设根字体，必须 fallback 到内联 calc() 或 JS 动态设置——但 JS fallback 有闪屏风险，优先选前者。
