应放弃静态像素定位，改用@container hinge-safe定义双列网格留出2px铰链间隙，控件仅置于左右列，并监听matchmedia('(display-fold: horizontal)')防抖更新class；fallback采用组合媒体查询加高度判断，确保折叠屏展开后交互控件不被物理铰链遮挡。
铰链区域遮挡导致控件不可见怎么办
根本问题不是“居中没对齐”，而是 justify-content: center 算出的坐标落在物理铰链上——那里既不渲染也不响应点击。Android 12+ 的 env(safe-area-inset-left) 对中间铰链完全无效，别白费力气写它。
- 放弃所有基于
window.innerWidth或screen.width的像素偏移计算，这些值在折叠屏展开后仍返回完整宽度，但实际可绘制区域被中断 - 不用 JS 动态重排，也不用监听
resize，高频 DOM 操作会卡顿且不可靠 - 真正可用的信号是
matchMedia('(display-fold: horizontal)')，但它只在 Chrome Beta v125+ 和 Samsung One UI 6.1+ 支持，必须配 fallback
@container hinge-safe 是怎么留出 2px 铰链间隙的
核心不是“避开”，而是让容器自己感知是否跨铰链。关键在两步：声明容器类型 + 条件化网格定义。
-
main元素必须设container-type: inline-size和container-name: hinge-safe -
@container hinge-safe (min-width: 720px) and (aspect-ratio >= 2/1)这个条件只在展开态、宽高比足够时命中，避免误触竖屏小屏 -
grid-template-columns: 1fr 2px 1fr显式留出中间列，pointer-events: none确保它不拦截点击，background: transparent避免视觉干扰 - 所有可交互元素（按钮、输入框等）只放
grid-column: 1或grid-column: 3，绝不写grid-column: 2或 span 跨中线
为什么不能用 media query 判断 display-fold
@media (display-fold: horizontal) 目前仅限实验性支持，绝大多数生产环境浏览器直接忽略这条规则，写了等于没写。
- Chrome Stable、Firefox、Safari 均未实现该媒体查询，查 caniuse 会看到 “No support”
- fallback 必须务实：组合
matchMedia('(display-mode: standalone)')+matchMedia('(min-aspect-ratio: 4/3)')+window.innerHeight > 800排除小屏干扰 - 防抖更新 class 是必须的：
mediaQuery.addEventListener('change', debounce(updateHingeClass, 100))，否则频繁触发 layout thrashing
折叠态和展开态切换时状态丢失怎么防
铰链避让只是视觉层，背后状态管理容易被忽略。Activity 重建、滚动位置重置、表单输入清空，这些问题和布局无关，但用户感知极强。
- Android 端必须在
AndroidManifest.xml中为 Activity 声明configChanges="screenSize|smallestScreenSize|screenLayout|orientation"，否则默认重建 - Web 端用
sessionStorage或localStorage缓存关键字段，比如textarea内容、scrollTop值，在DOMContentLoaded后恢复 - 不要依赖
onbeforeunload，它在折叠瞬间不触发；改用visibilitychange事件监听页面可见性变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
