viewport meta标签必须置于head最开头，确保浏览器首次解析即应用；标准配置仅用width=device-width和initial-scale=1，其他参数易引发兼容性与无障碍问题。
viewport meta 标签必须放在 最顶部
双屏开发时，很多人把 <meta name="viewport"> 往下挪——比如塞在 CSS link 后面、或者 JS 之前，结果在 iOS Safari 里页面先闪一下桌面宽度再重排。这不是 bug，是浏览器渲染机制：它按顺序解析，没看到 viewport 就默认用 980px 渲染。
真实踩坑场景：你在副屏开 Live Server 预览，主屏改代码，保存后页面偶尔错位、字体忽大忽小——大概率是这行标签位置不对。
- 必须写在
<head>内第一行，早于所有<link>、<style>、<script> - 拼写零容错：
width=device-width不能写成device_width或width=deviceWidth - 别加
maximum-scale=1或user-scalable=no，除非是自助终端；普通网站禁用缩放会触发 WCAG 可访问性审查失败
Flex 和 Grid 别在同一容器混用
双屏调试时容易犯的结构错误：为了“快速适配”，在 display: flex 的导航栏里，又给某个子项设 display: grid 做内部排列。这在 Chrome DevTools 里看着没问题，但真机（尤其 Android 4.4 WebView）会忽略 grid-gap 或错乱 flex-wrap。
根本原因不是兼容性差，而是语义冲突：Flex 是一维流式控制，Grid 是二维区域划分，混用会让 layout engine 无法确定主轴归属。
立即学习“前端免费学习笔记（深入）”；
- 导航栏、列表、卡片流 → 用 Flex，靠
flex-direction+@media切换方向 - 仪表盘、后台首页、多栏内容区 → 用 Grid，用
grid-template-columns: minmax(300px, 1fr) 2fr这类弹性轨道定义 - 绝对不要在同一个父容器上同时声明
display: flex和display: grid—— 即使只对一个子元素生效，也建议抽离为独立 wrapper
断点别硬套 768px/1024px，按内容挤占临界点设
双屏办公时，你常在主屏写 CSS，副屏调 Chrome 设备模拟器，反复切 iPhone SE / iPad Pro / 1920×1080。这时如果断点还写 @media (min-width: 768px)，会发现 iPad 横屏下文字堆叠、表单被键盘顶飞——因为只看了宽度，没看 orientation 和 max-height。
真正起效的断点，是“内容开始撑不开”的那一刻。比如一张卡片宽 320px，左右 margin 各 12px，那在 344px 宽视口里刚好一行；到 343px 就必然换行——这个值才是你的断点，而不是设备型号。
- 优先用
@media (min-width: 620px)、@media (min-width: 840px)这类非整百数值，更贴近真实内容流 - 高度敏感组件（弹窗、登录框、编辑器）加
@media (max-height: 600px)单独调padding和font-size - 横屏专用样式必须显式写
@media (min-width: 768px) and (orientation: landscape)，不能依赖宽度推断
图片和 iframe 必须加 min-width: 0 才能在 flex/grid 里收缩
双屏开发最隐蔽的溢出问题：你在副屏看预览，发现小屏下 banner 图撑破容器、出现横向滚动条，但检查 CSS 发现明明写了 img { max-width: 100%; height: auto; } —— 问题出在父容器用了 Flex 或 Grid。
因为 flex item 默认有 min-width: auto，它会阻止子元素（包括图片）收缩到比内容更小，哪怕你设了 max-width: 100% 也没用。
- 修复方案很简单：给图片父容器加
min-width: 0（如果是 flex 子项）或min-width: 0（如果是 grid 子项） - 同理适用于
<iframe>、<video>、<object>，规则一样 - 别只信
width: 100%—— 它只填满父容器，不防原始尺寸过大；max-width: 100%+height: auto+min-width: 0才是完整组合
