viewport meta 标签必须置于 head 最顶部且参数严格校验，否则双屏设备首次渲染异常；禁用 maximum-scale 和 user-scalable；flex 与 grid 不可混用于同一父容器；断点应按内容临界点而非设备型号设定；横竖屏需显式区分；resize 比 orientationchange 更可靠；真机测试须覆盖半折叠状态。
viewport meta 标签位置和参数必须严格校验
双屏移动设备（如折叠屏手机、Surface Duo）首次渲染异常，90% 源于 <meta name="viewport"> 写错或放错位置。它不是“锦上添花”，而是浏览器决定用什么宽度解析 DOM 的第一道指令。
常见错误现象：width=device-width 拼成 device_width 或 width=deviceWidth；initial-scale=1 被漏掉；标签被塞在 <link rel="stylesheet"> 后面——结果是 iOS Safari 先按 980px 渲染，再重排，造成闪屏、字体跳变、按钮点不中。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须放在<head>最顶部，早于所有<link>、<style>、<script> - 禁用
maximum-scale=1和user-scalable=no：折叠屏用户常需双指缩放查看局部内容，禁用会直接触发 WCAG 可访问性失败 - 不要依赖
window.devicePixelRatio做 layout 计算：Chrome DevTools Device Toolbar 模拟的 DPR ≠ 真机值，尤其在三星 Galaxy Z Fold 系列上偏差明显
flex 与 grid 在折叠屏上不能混用同一父容器
折叠屏展开后视口宽度突变（如从 270px → 1440px），若父容器同时声明 display: flex 和子元素内嵌 display: grid，Android WebView（Chromium 30–60）和部分 Samsung Internet 版本会忽略 grid-gap 或错乱 flex-wrap 行为。
根本问题不是兼容性差，而是布局语义冲突：Flex 是一维流式控制，Grid 是二维区域划分，引擎无法确定主轴归属。
立即学习“前端免费学习笔记（深入）”；
- 导航栏、列表、横向卡片流 → 统一用 Flex：小屏
flex-direction: column，展开后@media (min-width: 720px) { flex-direction: row; } - 仪表盘、表单页、多栏内容区 → 统一用 Grid：定义
grid-template-columns: minmax(300px, 1fr) 2fr，避免硬写50%或600px - 绝对不要在同一个
<div>上既写display: flex又让某个子项用display: grid做主结构——哪怕只对一个子项生效，也抽离为独立<div class="grid-wrapper">
断点必须按内容挤占临界点设，而非设备型号
双屏移动设备的典型陷阱：写 @media (min-width: 768px) 适配 iPad，结果在 Galaxy Z Fold 横向折叠态（宽 1440px，高仅 1800px）下，文字堆叠、输入框被软键盘顶飞——因为只看了宽度，没看高度和方向。
真正起效的断点，是“内容开始撑不开”的那一刻。比如一张卡片含左右 margin 各 12px、最小宽度 320px，那临界视口就是 320 + 12 * 2 = 344px；到 343px 就必然换行。
- 优先用非整百数值断点：
@media (min-width: 620px)、@media (min-width: 840px)，更贴近真实内容流 - 横竖屏必须显式区分：
@media (min-width: 768px) and (orientation: landscape)，不能只靠宽度 - 高度敏感组件（弹窗、登录框、编辑器）加
@media (max-height: 600px)单独调padding和font-size，避免被键盘遮挡 - 禁用
max-device-width：已废弃，查的是设备物理宽度，而折叠屏展开后物理宽度不变、视口宽度剧变
折叠态切换时 CSS 动画需监听 resize 而非 orientation
很多方案用 @media (orientation: portrait) 做动画触发，但在 Galaxy Z Flip 或 Pixel Fold 上，折叠过程可能先触发 resize 事件，再触发 orientationchange，导致动画延迟或错失时机。
更可靠的方式是监听 window.onresize，并结合 window.innerWidth 和 window.innerHeight 实时比对变化阈值。
- 避免用
transition: all 0.3s：折叠态切换时视口尺寸突变，全属性过渡易引发卡顿；只对明确要动的属性加 transition，如transition: width 0.2s, padding 0.2s - 用
requestAnimationFrame包裹 DOM 更新，防止 resize 频繁触发导致 layout thrashing - 真机测试必须覆盖“半折叠”状态：Z Fold 屏幕可停在任意角度，此时
window.innerWidth可能为 720px，但window.innerHeight仅为 900px，需单独处理
实际最易被忽略的点：双屏移动设备没有统一的“展开完成”事件，resize 触发后还需加 setTimeout 延迟 100ms 才能确保 DOM 重排稳定，否则 JS 获取的 offsetWidth 仍是旧值。
