HTML导航布局适配横屏与竖屏的实现方法-html教程-PHP中文网

只靠@media (orientation: portrait/landscape)做横竖屏切换90%会失效，因其仅依赖视口宽高比而非真实设备朝向或物理布局；必须结合visualViewport.width、screen.orientation.type及screen-spanning媒体查询（Chromium 119+支持）交叉验证，方能稳定识别折叠屏铰链状态与真实方向。

html导航布局适配横屏与竖屏的实现方法

直接结论：只靠 @media (orientation: portrait) 或 @media (orientation: landscape) 做横竖屏切换，90% 的场景会失效——尤其在双屏折叠设备上。必须配合 visualViewport.width、screen.orientation.type 和 screen-spanning 媒体查询才能稳定识别真实方向与物理布局状态。

为什么 `@media (orientation: ...)` 经常不准

这个媒体查询判断的是 CSS 视口的宽高比，不是设备当前真实朝向或可绘制区域。比如：

华为 Mate X5 折叠后竖屏，window.innerWidth 可能仍返回 1200px（系统 UI 占位），导致 orientation: landscape 被误判
iOS Safari 在折叠动画中间帧里，matchMedia('(orientation: portrait)') 可能连续触发 false/true/false，造成布局抖动
某些 Android WebView 不支持 orientation 查询，直接回退到 not all

真正可靠的做法是：用 visualViewport.width 获取实时可视宽度，再结合 screen.orientation.type（如 "portrait-primary"）交叉验证——它来自系统传感器，延迟低、不依赖渲染管线。

`screen-spanning` 是双屏设备的唯一可信信号

Chromium 119+（Android Chrome / Edge Beta）开始支持该实验性媒体特性，能直接识别铰链状态：

@media (screen-spanning: single-fold-horizontal) → 设备已展开、横屏、铰链在上下边（Z Fold 横置）
@media (screen-spanning: single-fold-vertical) → 合盖、竖屏、铰链在左右边（Flip 类设备）
桌面浏览器或旧版引擎中该查询返回 not all，必须用 JS 回退到 window.matchMedia 监听 + 宽高差值判断

示例：导航栏在展开态铺满双屏，在合盖态收为底部 tab

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

@media (screen-spanning: single-fold-horizontal) {
  .nav-bar { display: flex; width: 100vw; }
}
@media (screen-spanning: single-fold-vertical) {
  .nav-bar { position: fixed; bottom: 0; width: 100%; }
}

Flex 布局在横竖屏切换时的塌陷风险

很多页面在横屏下导航项突然换行、图标错位，根本原因不是媒体查询没写，而是 Flex 属性配置冲突：

默认 flex-shrink: 1 会让文字长的菜单项被压缩，横屏下反而更易溢出
漏设 flex-wrap: wrap，窄横屏（如 iPad mini 横屏）直接横向滚动
用 flex: 0 0 120px 固定宽度 → 折叠屏 DPR 高时字体渲染放大，内容撑破容器

安全写法是：

.nav-list {
  display: flex;
  flex-wrap: wrap;
}
.nav-item {
  flex: 1 1 minmax(80px, auto); /* 允许收缩但保最小点击区 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* 关键：防止文本强制撑宽 */
}

真机测试时最容易忽略的三个点

模拟器跑通 ≠ 真机可用。以下三点在 Pixel Fold、Mate X6、Surface Duo 3 上反复验证过：

必须存在且拼写零误差；缺 viewport-fit=cover，折叠态内容会被系统安全区裁切
不要监听 resize 事件做布局重排——折叠动画期间可能触发 20+ 次，卡顿且不可预测；改用 window.matchMedia('(screen-spanning: ...)').addEventListener('change', ...)
CSS 中禁用 white-space: nowrap 以外的任何强制单行控制；双屏折叠时行高计算偏差会导致文字截断，必须配 min-width: 0 + text-overflow: ellipsis