不建议用 max-height 做媒体查询断点，因移动端地址栏和操作栏动态显隐会导致 window.innerheight 频繁变化，引发弹窗错位；应改用 max-width 断点配合内部自适应定位，并在必要时用 javascript 动态计算高度。
不建议用高度做媒体查询来适配弹窗位置。
为什么别用 max-height 做断点
移动端浏览器地址栏和底部操作栏会动态显示或隐藏，导致 window.innerHeight 在滚动、点击、切换输入法时频繁变化。比如 iPhone Safari 滚动时地址栏收起，视口高度突然增加 60–80px，原本匹配 @media (max-height: 667px) 的弹窗样式可能瞬间错位甚至消失。这种抖动不是设计意图，而是误触发。
高度值在折叠屏、分屏模式、横竖屏切换时行为更不可控——同一设备横屏后 height 变成 width，媒体查询逻辑就乱了。
正确做法：用宽度断点 + 弹窗内部自适应定位
弹窗的“位置合理性”本质取决于容器可用空间和交互习惯，而这些主要由屏幕宽度决定（设计稿按宽切图、用户单手操作区域集中在宽度方向）。所以应：
- 用
max-width设置 3–4 个主流断点（如 320px、375px、414px、768px），覆盖 iPhone SE 到 iPad - 在每个断点内，让弹窗使用
position: fixed或absolute，并结合top: 50%+transform: translateY(-50%)垂直居中 - 弹窗内容区用
max-height: 80vh+overflow-y: auto，避免超出可视区域 - 需要顶部/底部锚定的弹窗（如 toast、底部菜单），统一用
bottom: env(safe-area-inset-bottom)兼容刘海屏和全面屏
需要高度感知的场景怎么办
极少数情况确实依赖视口高度，比如全屏视频弹窗、游戏 HUD、阅读器翻页。这时不要靠 CSS 媒体查询，改用 JavaScript 动态计算：
- 监听
resize和orientationchange事件 - 用
document.documentElement.clientHeight获取稳定可用高度（比window.innerHeight更少受地址栏干扰） - 根据高度值直接设置弹窗
style.top或修改 CSS 自定义属性（如:root { --popup-top: 120px; }）
补充：横屏单独处理更可靠
如果弹窗在横屏下需特殊布局（比如从居中变成左对齐+固定高度），用 @media (orientation: landscape) 单独写规则，而不是靠高度数值“猜”设备朝向。它语义清晰、触发稳定，且与系统原生 orientation 信号一致。
