确保移动端h5校验提示框始终可见且不被截断：启用viewport-fit=cover与env(safe-area-inset-bottom)留白，用fixed定位+动态锚定输入框位置，禁用旋转干扰，小屏降级为toast并精简文案。
在移动端 H5 中，自定义校验提示框（如表单输入后弹出的红色文字、气泡或 Toast）被遮挡，常见于横屏场景或小屏手机——尤其是当提示框定位依赖固定 top/bottom 值、或父容器 overflow 隐藏、或页面未适配视口变化时。核心不是“弹出来”，而是“确保它始终可见且不被截断”。
用 viewport-fit=cover + 动态视口高度防裁切
小屏或横屏下，系统状态栏、安全区、浏览器地址栏会挤压可用视口，导致底部提示框被裁掉。需在 meta 中启用安全区适配：
- HTML 头部加：
- 配合 CSS 使用 env(safe-area-inset-bottom) 为底部留白，避免提示框紧贴屏幕底边被截断
- 校验提示若固定在 input 下方，建议用 calc(100vh - env(safe-area-inset-bottom)) 计算最大安全高度，再约束提示区域高度
提示框采用 fixed 定位 + 视口内动态锚定
避免使用 absolute 相对于滚动容器定位（易随滚动消失或错位），改用 fixed 并绑定到当前激活的输入框视觉位置：
- 监听 focus 事件，获取 getBoundingClientRect() 得到输入框在视口中的坐标
- 计算提示框应显示的位置：顶部对齐 input 底部 + 8px 间距；若超出视口底部，则改为 input 顶部 - 8px（上浮显示）
- 用 transform: translateZ(0) 强制硬件加速，防止 fixed 元素在 iOS 滚动中闪烁或错位
横屏时禁用强制竖向布局干扰
部分页面为防横屏做了 CSS 旋转或 transform，但会导致 fixed 元素坐标系错乱，使提示框偏移。需特别注意：
- 避免对 html 或 body 设置 rotate/transform，尤其不要用旋转容器模拟横屏
- 横屏检测应仅用于样式调整（如 flex-direction、字体大小），而非 DOM 重排；推荐用 window.matchMedia("(orientation: landscape)") 切换 class
- 提示框自身不参与 orientation 媒体查询，保持响应式尺寸（如 max-width: 80vw，font-size: clamp(12px, 3vw, 14px)）
小屏设备做降级提示与交互简化
超小屏（如 iPhone SE）宽度不足，横向空间紧张，强行展示完整提示框反而影响操作。可主动降级：
- 通过 screen.width 或 window.innerWidth 判断，改用顶部 Toast（居中、短时、无箭头）替代带指向的气泡框
- 错误文案精简至 1 行，禁用换行；图标改用更紧凑的 SVG（宽高 ≤ 16px）
- 聚焦时自动 scrollIntoView({ block: 'nearest', inline: 'center' })，把 input 和提示框一起拉入中心视野，减少手动滚动需求
