竖屏与横屏是两种独立交互场景，需分别设计竖向堆叠流和横向空间协同流，并用 visualViewport + screen.orientation 精准判定方向，避免仅依赖 orientationchange 或媒体查询导致的误判。
竖屏和横屏不是简单缩放关系，而是两种独立的交互场景。直接用 @media (orientation: portrait) 或 (orientation: landscape) 切换样式，往往只能做微调，无法支撑“两套完全不同的排版”。真正有效的做法是：以内容流向和操作动线为出发点，分别设计竖向堆叠流与横向空间协同流，并通过可靠的检测机制触发切换。
用 visualViewport + screen.orientation 做精准方向判定
仅靠 orientationchange 事件或媒体查询容易误判——比如折叠屏在半展开状态、某些安卓系统横屏时 window.innerWidth 仍成立。必须组合使用：
-
visualViewport.width：比
window.innerWidth更早响应物理可视区域变化，尤其在折叠动画过程中不丢帧 -
screen.orientation.type：返回
"portrait-primary"、"landscape-secondary"或新兴的"fold-horizontal"，比宽高比更语义化 -
避免只查
matchMedia("(orientation: landscape)")：它在部分三星折叠设备上会把双屏展开态识别为 portrait（因系统 UI 占位导致视口高度被压缩）
竖屏：聚焦单列主流程，压缩横向干扰
竖屏本质是「时间轴式阅读」，用户手指自然上下滑动。此时应弱化横向分区，强化信息密度与触达效率：
- 导航收为底部 Tab 或抽屉式侧边栏，顶部仅留核心操作（如搜索框、拍照按钮）
- 表单字段一律垂直堆叠，禁用
display: grid; grid-template-columns: 1fr 1fr类写法 - 卡片类内容用
flex-direction: column+gap: 16px，图片宽度设为100%，高度用aspect-ratio: 4/3控制 - 关键按钮固定在视口底部（
position: sticky; bottom: 0），避免滚动后消失
横屏：释放空间，重构人机协作逻辑
横屏是「空间并行式操作」，适合多任务、预览+编辑、对比查看等场景。不能只是把竖屏组件拉宽，而要重定义信息层级：
- 左侧常驻导航/筛选区（
min-width: 240px），右侧为主内容区，用grid-template-columns: 240px 1fr或SideBarContainer（HarmonyOS） - 表格类数据启用横向滚动容器，但表头固定（
position: sticky; top: 0），避免滚动丢失上下文 - 图文混排改用
GridRow / GridCol或float: left+min-width: 0防止文字撑破容器 - 弹窗类组件不再居中，改为锚定在操作源附近（如点击右上角设置图标，弹窗从右上角滑出），利用横屏富余空间提升操作连贯性
过渡态必须有降级兜底
设备旋转不是瞬时完成，中间存在几十毫秒的“既非竖也非横”状态。若布局突变，用户会看到白屏、错位或内容跳动：
- 所有横屏专属模块加
opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s，检测到稳定横屏后再opacity: 1; transform: none - 竖屏下隐藏的横屏导航栏，不要用
display: none，改用visibility: hidden; height: 0; overflow: hidden，保留 DOM 结构防止重排抖动 - 对 Canvas、Video 等原生元素，在
resize回调中手动调用canvas.width = visualViewport.width，避免拉伸失真
