横竖屏适配需正确设置viewport并组合使用orientation媒体查询与宽高比/尺寸条件，配合100dvh、clamp()等响应式单位及matchMedia监听，避免依赖已废弃的orientationchange或不可靠的resize事件。

横竖屏切换适配不能只靠猜，得用 @media screen and (orientation: landscape) 和 @media screen and (orientation: portrait) 明确检测逻辑方向，再配合关键细节才能稳定生效。

必须写对 viewport 标签

缺了或写错 <meta name="viewport">，orientation 媒体查询在 iOS Safari 和 Android Chrome 中基本不触发。常见错误有：

• 漏掉 width=device-width——横屏时浏览器仍按竖屏逻辑渲染，orientation 永远不匹配
• 用了固定值如 width=375——视口宽度不变，媒体查询无从重算
• 被 JS 动态覆盖——初始设置后又被脚本改写，后续方向变化失效

推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

别单独依赖 orientation

它只看“逻辑宽度是否大于高度”，不关心物理朝向或地址栏是否展开。比如横屏时地址栏未收起、折叠屏半展开，window.innerWidth ，<code>orientation: landscape 就可能不匹配。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

稳妥做法是组合判断：

• @media screen and (orientation: landscape) and (min-aspect-ratio: 1280/720)
• @media screen and (max-height: 480px) and (min-width: 640px)——直接响应真实瓶颈（高度骤减）

注意单位和布局属性的翻车点

横竖屏切换后，这些 CSS 值最容易出问题：

• 100vh 在 iPhone 横屏下只剩 390px，内容常被截；改用 100dvh 或降级为 min-height: 100% + html, body { height: 100% }
• 100vw 在 iOS Safari 横屏时包含已隐藏地址栏高度，造成溢出；优先用 100% 或 100dvw（注意 Android Chrome 100 以下不支持）
• flex-direction 不会自动翻转；竖屏用 column，横屏必须显式写 row
• font-size: 4vw 横屏暴增；改用 clamp(14px, 2.5vw, 16px) 锁死区间

JavaScript 监听要用 matchMedia

window.orientationchange 已废弃，resize 在 iOS 横竖屏切换时经常不触发。最稳定的方式是：

• 用 window.matchMedia("(orientation: portrait)") 获取媒体查询对象
• 立即检查当前状态：handleOrientation(media.matches)
• 绑定 change 事件：media.addEventListener("change", e => handleOrientation(e.matches))
• 在回调中读取 document.body.offsetHeight 等属性，可强制浏览器重排，修正布局错位