横竖屏切换时表单错位主因是键盘生命周期与视口尺寸变化的竞态，需用resize监听、dvh单位、scroll-margin-top及动态重算dom位置来解决。
横竖屏切换时表单元素错位或溢出
浏览器触发 orientationchange 或 resize 事件时，input、textarea、select 常因固定宽高、vw/vh 计算偏差或 viewport 缩放未重置而错位。尤其在 iOS Safari 中，键盘弹起后切横屏，document.body.clientWidth 可能仍按竖屏尺寸计算。
- 避免对表单控件写死
width: 300px，改用width: 100%+max-width限定上限 - 禁用
viewport的user-scalable=no，否则 iOS 横屏后缩放失效，导致布局断裂 - 监听
resize而非orientationchange（后者在 Chrome/Edge 已废弃，且部分安卓机型不触发） - 若用
vh设置高度，改用dvh（dynamic viewport height）：如height: 80dvh，避免 iOS 键盘收起后留白
CSS media query 判断横竖屏不准
@media (orientation: landscape) 在折叠屏、多窗口或分屏模式下极易误判——它只读取视口长宽比，不反映设备物理朝向。比如 Pixel Fold 横屏折叠状态，逻辑视口仍是“竖”的，但 orientation 却返回 landscape。
- 优先用
@media (width > height)替代(orientation: landscape)，更贴近实际渲染尺寸 - 对关键表单区域（如登录框），加一层
aspect-ratio容错：如aspect-ratio: 4/3配合width: min(100%, 400px) - 不要依赖
window.orientation（已废弃），改用window.matchMedia("(orientation: landscape)").matches，但需配合resize事件二次校验
软键盘弹出导致横屏表单被顶起或遮挡
iOS Safari 横屏下唤起软键盘，视口高度骤减，但 position: fixed 的提交按钮可能卡在键盘上方空白区，用户无法点击；Android 部分 WebView 则直接把整个表单卷到顶部之外。
- 给表单容器加
scroll-margin-top：如scroll-margin-top: 60px，确保聚焦时自动滚动到可视区 - 避免对
input使用position: fixed或transform: translateZ(0)（会破坏 iOS 键盘联动滚动） - 监听
focusin事件，动态设置body.style.height = "100vh"，失焦后恢复，防止键盘收起后页面留白 - 测试时务必在真机上用 Safari 开发者工具远程调试，模拟器常无法复现键盘高度变化
表单验证提示在横竖屏切换后位置偏移
基于 getBoundingClientRect() 定位的自定义错误气泡，在横屏后坐标未更新，悬停在旧位置；CSS 动画类提示（如 scale + top）因视口尺寸突变而错位。
立即学习“前端免费学习笔记（深入）”；
- 所有依赖 DOM 尺寸的提示层，必须在
resize后重新计算位置，不要缓存rect - 用
position: absolute时，父容器必须是position: relative且不随横竖屏重排（避免用flex父级直接包裹提示层） - 避免用
top: 50%+transform: translateY(-50%)居中提示，横屏后50%基准变了；改用inset-block-start: 0+margin-block: auto
横竖屏适配真正的难点不在 CSS 写法，而在「键盘生命周期」和「视口真实尺寸」之间那几十毫秒的竞态——多数问题不是样式没写对，是事件监听没覆盖到键盘弹起/收起+方向切换的组合时机。
