flex-direction 不会自动响应横竖屏切换，必须配合 @media (orientation: landscape/portrait) 显式重写且父容器保持 display: flex；浏览器仅通过 innerWidth > innerHeight 判断朝向，不读取陀螺仪；window.orientation 已废弃，应改用 window.matchMedia("(orientation: landscape)") 监听；真机调试需关注键盘、dvh、scroll-margin 等交互细节。
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)")：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
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 全屏等场景。
表单与键盘场景下的横竖屏错位修复
横竖屏切换 + 软键盘弹出是错位高发组合，尤其 iOS Safari：
- 避免对
input写死width: 300px，改用width: 100%+max-width: 400px - 高度慎用
vh，改用dvh（dynamic viewport height）：height: 80dvh - 给表单容器加
scroll-margin-top: 60px，确保focus后自动滚动到可视区 - 禁用
viewport中的user-scalable=no，否则横屏后缩放失效，布局断裂 - 所有基于
getBoundingClientRect()定位的提示层（如验证气泡），必须在resize后重新计算，不能缓存rect
比 orientation 更稳的断点策略
折叠屏、多窗口、分屏模式下，@media (orientation: landscape) 极易误判（例如 Pixel Fold 展开竖屏，但逻辑视口宽 > 高，仍触发 landscape）。更可靠的替代方式：
- 主逻辑走宽度断点：
@media (max-width: 768px)默认竖排，@media (min-width: 769px)切横排 - 真需处理小屏横屏（如视频页），叠加写：
@media (orientation: landscape) and (max-width: 768px) - 关键区域加
aspect-ratio: 4/3容错，配合width: min(100%, 400px) - 文字尺寸别用纯
vw，改用font-size: clamp(14px, 2.5vw, 16px)
真正难处理的不是“怎么切”，而是“切完之后，键盘、滚动、安全区、dvh 和 scroll-margin 之间如何不打架”——这些细节在模拟器里全正常，只有真机连 Safari 开发者工具调试时才会暴露。
