HTML移动端横竖屏切换布局的适配技巧-html教程-PHP中文网

flex-direction 不会自动响应横竖屏切换，必须配合 @media (orientation: landscape/portrait) 显式重写且父容器保持 display: flex；浏览器仅通过 innerWidth > innerHeight 判断朝向，不读取陀螺仪；window.orientation 已废弃，应改用 window.matchMedia("(orientation: landscape)") 监听；真机调试需关注键盘、dvh、scroll-margin 等交互细节。

html移动端横竖屏切换布局的适配技巧

flex-direction 不会自动响应横竖屏切换，必须配合 @media (orientation: ) 显式重写，且父容器必须保持 display: flex —— 这是 90% 的“横竖屏没反应”问题的根源。

为什么 `@media (orientation: landscape)` 经常不生效

浏览器只比对 innerWidth > innerHeight 这一数值关系，不读取陀螺仪或设备物理朝向。常见失效点：

display: flex 没写在目标父容器上，或被更高权重样式（如内联 style 或 ID 选择器）覆盖
默认已设 flex-direction: row，横屏时切回 row，视觉无变化，误以为“没生效”
父容器 height 为 auto，竖屏内容撑高，横屏下 100vh 截断导致子项渲染异常
混用 margin-bottom 和 gap：竖屏有效，横屏后 margin-bottom 变成“向下推”，破坏横向对齐

用 `matchMedia` 替代 `window.orientation` 监听方向

window.orientation 在 Safari 15.4+、Chrome 95+ 已彻底废弃，调用返回 undefined 或 0。可靠方案是：

直接使用 window.matchMedia("(orientation: landscape)")：

const mql = window.matchMedia("(orientation: landscape)");
mql.addEventListener("change", e => {
  if (e.matches) {
    document.body.classList.add("landscape");
  } else {
    document.body.classList.remove("landscape");
  }
});
// 首次执行需手动检查
if (mql.matches) document.body.classList.add("landscape");

优势：不依赖窗口尺寸计算、无抖动、兼容 iOS Safari 12.2+ / Chrome 74+ / Firefox 69+，且能响应分屏、PWA 全屏等场景。

htmlppt.skill

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

下载