稳定适配横竖屏需“监听+媒体查询+resize校验”三层配合；@media(orientation:landscape)误判因只比innerWidth/Height，不反映物理朝向；键盘、折叠屏等场景易错位，须用dvh、scroll-margin-top、动态坐标重算及微任务延后校验。
不能靠 window.orientation 自动适配，它已被废弃；也不能指望 screen.orientation.lock() 真正锁住横屏——iOS Safari 完全不支持，安卓也常静默失败。实际能稳定落地的，只有“监听 + 媒体查询 + resize 校验”三层配合。
为什么 @media (orientation: landscape) 会误判？
这个媒体查询只看 innerWidth 和 innerHeight 的大小关系，不反映设备物理朝向或窗口状态。折叠屏（如 Pixel Fold）、分屏模式、甚至 iOS 键盘弹出后未收起时，innerWidth > innerHeight 可能为真，但用户明明拿着手机是竖着的。
- 优先改用
@media (width > height)或@media (width ，更贴近真实渲染尺寸 - 对关键区域加
aspect-ratio容错，比如登录框设aspect-ratio: 4/3配合width: min(100%, 400px) - 不要单独依赖它做逻辑分支，必须和
window.matchMedia("(orientation: landscape)").matches结合，并在resize事件里二次校验
resize 事件比 orientationchange 更可靠
orientationchange 在 Chrome/Edge 中已废弃，很多安卓机型根本不触发；而 resize 虽然在 iOS 键盘弹起/收起时也会触发，但它是唯一能覆盖所有视口尺寸变化场景的兜底手段。
- 监听
resize时务必节流，用requestAnimationFrame包裹重绘逻辑，否则频繁旋转会导致 UI 闪烁 - 判断方向别只看
window.orientation（已废弃），改用：screen.width > screen.height或window.innerWidth > window.innerHeight - 键盘弹出后切横屏，
document.body.clientWidth可能仍按竖屏尺寸缓存，所以每次 resize 都要重新读取innerWidth/innerHeight
表单在横竖屏切换后错位怎么办？
错位主因是软键盘生命周期与视口突变的竞态：iOS 横屏唤起键盘，视口高度骤减，但 position: fixed 的按钮卡在空白区；Android WebView 则可能把整个表单卷出可视区。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 禁用
viewport的user-scalable=no，否则 iOS 横屏后缩放失效，布局直接断裂 - 避免对 input 写死
width: 300px，改用width: 100%+max-width限定上限 - 给表单容器加
scroll-margin-top: 60px，确保聚焦时自动滚动到可视区 - 若用
vh设高度，必须换成dvh（dynamic viewport height），比如height: 80dvh，否则键盘收起后留白
强制横屏的视觉模拟怎么写才不裁切？
当 screen.orientation.lock("landscape-primary") 失败时，CSS 旋转是唯一通用 fallback。但只写 transform: rotate(90deg) 会导致内容被裁成左上角一小块——因为 body 仍按原始宽高占位。
- 必须同时设置：
body { width: 100vh; height: 100vw; transform-origin: top left; } - 加
position: absolute，否则旋转后仍占据原始文档流位置，造成空白或重叠 -
position: fixed元素会随 body 一起旋转，需单独重置：fixed-el { transform: rotate(-90deg); } - 所有绝对定位提示层（如验证气泡）必须在
resize后重新调用getBoundingClientRect()计算坐标，不能缓存
最易被忽略的是 resize 触发时机：iOS 键盘收起后，resize 会触发两次（一次是键盘退场，一次是视口恢复），中间夹着一个短暂的错误尺寸状态。这时候如果直接应用旋转逻辑，页面会闪一下再恢复正常——得用 setTimeout 或 Promise.resolve().then() 把校验延后到微任务末尾执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
