应使用@media (width > height)替代@media (orientation: landscape)，因其基于实际渲染尺寸判断方向，避免折叠屏/分屏下误判；配合flex布局、scroll-margin-top锚定、resize节流重算等方案确保表单稳定。
用 @media (orientation: landscape) 切换表单布局不稳？
直接用 @media (orientation: landscape) 在折叠屏、分屏或多窗口模式下容易误判——它只看视口宽高比，不反映真实方向。比如 Pixel Fold 横屏折叠时，orientation 可能返回 landscape，但逻辑视口仍是窄高的“竖”状态，导致样式错配。
更可靠的做法是用 @media (width > height) 替代，它基于实际渲染尺寸判断，兼容性好，且不受键盘弹出、缩放等干扰。iOS Safari 12.2+、Chrome 74+、Firefox 69+ 全支持。
- 竖屏基础样式写在默认规则里（mobile-first），横屏覆盖用
@media (width > height) - 避免混用
window.orientation（已废弃）或screen.orientation.type（需用户手势才可读） - 若需 JS 响应，用
window.matchMedia("(width > height)").matches+resize事件监听，别用orientationchange（Chrome/Edge 已废弃）
Flexbox 实现表单控件横竖切换的关键参数
用 display: flex 切换方向，核心不是改 flex-direction，而是控制容器宽度和子项排列逻辑。硬切 column ↔ row 容易引发对齐错乱、文字镜像或 order 失效。
推荐做法：保持 flex-direction: column 不变，仅在横屏时把 .form-group 设为 display: flex 并设 flex-wrap: wrap，让 label 和 input 并排；竖屏下仍为块级堆叠。
- 竖屏默认：
.form-group { display: block; }，label 和 input 各占一行 - 横屏覆盖：
@media (width > height) { .form-group { display: flex; align-items: center; gap: 8px; } label { flex: 0 0 80px; } input, textarea { flex: 1; } } - 避免对 input 写死
width: 300px，改用width: 100%+max-width限定上限 - 不要给表单控件加
position: fixed或transform: translateZ(0)，会破坏 iOS 键盘滚动联动
横屏下软键盘顶起表单，提交按钮点不到怎么办？
iOS Safari 横屏唤起软键盘后，视口高度骤减，position: fixed 的按钮常卡在键盘上方空白区；Android WebView 则可能把整个表单卷出可视区。
关键不是“固定”，而是“锚定到可视区”。靠 scroll-margin-top + focusin 动态重设 body 高度最有效。
- 给表单容器加
scroll-margin-top: 60px，确保聚焦时自动滚动到可视区顶部留白 - 监听
focusin事件，动态设document.body.style.height = "100vh"；失焦后恢复为auto，防键盘收起后留白 - 禁用
viewport的user-scalable=no，否则横屏后缩放失效，布局断裂 - 测试必须用真机 + Safari 开发者工具远程调试，模拟器无法复现键盘高度变化
验证提示气泡在横竖切换后偏移，怎么重定位？
所有依赖 getBoundingClientRect() 计算坐标的自定义错误提示，在横屏后 rect 缓存未更新，就会悬停在旧位置；CSS 动画类提示（如 top + scale）也因视口突变而错位。
不能缓存 rect，也不能靠一次计算撑全场。每次 resize 后必须重算，且要节流。
- 监听
resize事件，用requestAnimationFrame节流，避免高频重绘 - 提示层父容器必须是
position: relative，且该容器本身不能随横竖屏重设transform或scale - 用
position: absolute时，top/left 值必须基于当前getBoundingClientRect()动态设置，不可静态写死 - 若用 Popper.js 等库，确认其
strategy: "absolute"且启用了flip和shiftmiddleware
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
