折叠屏设备因viewport meta标签错误或缺失会导致内容缩放、交互失效，必须正确设置width=device-width且禁用maximum-scale；应使用screen-spanning媒体查询精准识别折叠状态，并通过window.matchMedia监听铰链变化，避免resize事件卡顿；布局上需分离Flex与Grid职责，严禁混用导致塌陷；真机测试不可或缺。
viewport meta 标签写错，折叠屏直接“失明”
折叠屏设备（如 Galaxy Z Fold、Mate X 系列）在展开状态下视口宽度可能达 840–1200vp，但若 <meta name="viewport"> 缺失或参数错误，浏览器会按桌面模式渲染——结果是内容被缩放成小字、按钮点不中、横向滚动条强制出现。这不是折叠屏特有问题，而是所有响应式失效的起点。
必须确保这行出现在 <head> 最顶部，且拼写零误差：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width不能写成device_width或width=deviceWidth，否则整个媒体查询链失效 - 禁用
maximum-scale=1或user-scalable=no：折叠屏用户常需双指缩放查看细节，禁用即违反可访问性 - 真机测试时，iOS Safari 在折叠动画过程中可能触发两次重排，
initial-scale=1.0是唯一稳定锚点
用 screen-spanning 媒体查询识别折叠态，别猜尺寸
仅靠 @media (min-width: 840px) 无法区分“平板横屏”和“折叠屏展开”，因为两者宽度重叠。硬切列数会导致 Galaxy Z Fold 展开时显示 4 列（过密），而 iPad 横屏却只显 2 列（浪费空间）。
Chromium 119+（Android Chrome/Edge Beta）支持实验性特性 screen-spanning，它是唯一能真实反映铰链状态的 CSS 媒体特性：
立即学习“前端免费学习笔记（深入）”；
@media (screen-spanning: single-fold-horizontal) {
.recipe-grid { grid-template-columns: repeat(3, 1fr); }
.detail-layout { display: grid; grid-template-columns: 2fr 1fr; }
}
-
single-fold-horizontal表示横屏折叠（铰链在上下边），适用于 Z Fold 展开、Pixel Fold 横置等场景 -
single-fold-vertical对应竖屏折叠（铰链左右），如 Flip 系列合盖状态，此时应回退到单栏 - 桌面浏览器或旧版 Chrome 中该查询返回
not all，必须配合 JS 回退逻辑，不能全依赖 CSS
用 window.matchMedia 监听铰链开合，比 resize 更精准
折叠动画持续约 300ms，resize 事件在此期间高频触发（有时超 20 次），直接操作 DOM 会导致卡顿甚至样式错乱。而 window.matchMedia 只在媒体查询状态真正切换时触发一次，更可靠。
监听示例（需在 <body> 渲染前执行）：
const foldQuery = window.matchMedia('(screen-spanning: single-fold-horizontal)');
foldQuery.addEventListener('change', e => {
if (e.matches) {
document.body.classList.add('spanning-horizontal');
} else {
document.body.classList.remove('spanning-horizontal');
}
});
- 必须在
DOMContentLoaded之前调用，否则可能错过初始状态（尤其 PWA 启动时） - 回调内避免同步大量 DOM 更新，建议包裹
requestAnimationFrame - 同一设备可能同时匹配多个查询（如
(min-width: 840px)和(screen-spanning: ...)），CSS 层叠优先级决定最终生效规则
Grid + Flex 混用陷阱：折叠屏上布局突然“塌陷”
在折叠屏展开态下，常见错误是父容器用 display: flex，子项又嵌套 display: grid 做主区域划分——Android 12 WebView（Chromium 99）及部分低端机型会忽略 grid-gap 或错算 minmax()，导致卡片挤成一列或高度归零。
安全做法是明确职责分离：
- 导航栏、工具栏等一维排列 → 用
flex，配flex-wrap: wrap和flex-basis - 首页瀑布流、菜谱网格、详情双栏 → 用
grid，配grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) - 绝对禁止在
flex容器内直接设子元素为grid主布局，语义混乱且兼容性差
折叠屏的真实复杂点不在“怎么写”，而在“怎么测”：同一台设备，合盖、半折、全展三种状态需分别验证，且铰链位置偏移 1px 都可能让 screen-spanning 查询失效。别跳过真机调试。
