小屏幕下模态框须改用 position: fixed + 全宽布局，否则会溢出、遮挡、无法滚动或触发 iOS Safari viewport 缩放 bug；原生 默认 absolute 定位依赖父容器，在小屏易偏移截断，且 Safari 动画不支持、Firefox 兼容受限；应手动用 div 实现 fixed 全屏+max-height 可滚动，并适配 pointer: coarse 媒体查询与触控视觉重设。
小屏幕下模态框必须脱离默认 position: absolute 行为，改用 position: fixed + 全宽布局，否则会溢出、遮挡、无法滚动或触发 iOS Safari 的 viewport 缩放 bug。
为什么 dialog 默认行为在小屏上不可靠
原生 <dialog></dialog> 在 Chrome/Edge 中默认使用 position: absolute 定位，依赖父容器尺寸；小屏下若父容器未设 min-height: 100vh 或存在缩放，模态框会偏移、截断、甚至消失。Safari 对 dialog 的 showModal() 支持不一致，且不响应 transform: scale() 动画，直接导致动画卡顿或失效。
- 常见错误现象：
dialog内容被截断、底部按钮不可点、点击 backdrop 无反应、iOS 上弹出后页面无法滚动 - 根本原因：浏览器对
dialog的渲染逻辑未统一，尤其在 viewport 变化频繁的小屏设备上 - 兼容性影响：Firefox 仅支持
showModal()（不支持show()），旧版 Safari 需 polyfill，但 polyfill 通常不处理小屏定位逻辑
用 position: fixed + max-width 强制平铺
放弃依赖 dialog 的内置定位，用普通 <div class="modal"> 手动控制。关键不是“让它变大”，而是“让它撑满可用空间并可滚动”。
<ul>
<li>给模态框容器设 <code>position: fixed; top: 0; left: 0; width: 100%; height: 100%;
max-height: 85vh; overflow-y: auto;，避免内容顶穿顶部状态栏-webkit-overflow-scrolling: touch;，否则 iOS 滚动卡顿position: absolute; top: 12px; right: 16px;，避免随内容滚动消失.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
max-width: 90%;
max-height: 85vh;
background: #fff;
border-radius: 8px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
媒体查询中不要只靠 max-width 切换，要加 pointer: coarse
仅用 @media (max-width: 480px) 会漏掉折叠屏（如 Galaxy Z Fold 展开后仍是 portrait 但宽度 > 800px）。更可靠的判断是用户输入方式是否为触控。
立即学习“前端免费学习笔记（深入）”；
- 小屏平铺逻辑应同时匹配：
@media (max-width: 480px), (pointer: coarse) -
pointer: coarse表示设备有低精度指针（如手指），几乎所有手机和平板都满足，PC 触摸屏也适用 - 这样能覆盖 iPhone SE、Pixel 5、iPad mini 等真实小屏场景，而不依赖像素值硬编码
- 避免用
orientation: portrait单独判断——折叠屏展开后仍是 portrait，但已不是“小屏”
内容区域的 padding 和 font-size 必须重置
桌面端的 padding: 24px 和 font-size: 16px 在小屏上会导致大量空白和文字过小。这不是“适配”，是“重新设计视觉节奏”。
- 小屏下
padding应降到16px（上下）和12px（左右），留出更多内容空间 -
font-size建议用clamp(14px, 4vw, 16px)，确保最小可读、最大不撑破容器 - 按钮高度至少
44px（iOS 可点击区域最小要求），line-height不要设死，用em或rem配合 - 别让
textarea或长表单字段在小屏上拉伸整个模态框——加max-width: 100%和box-sizing: border-box
最易被忽略的是：小屏平铺后，模态框不再“居中于视口”，而是“贴顶+可滚动”。这意味着你不能假设用户一眼看到全部内容，必须把操作主路径（如确认按钮）放在可视区底部，且保证首次滚动就能触达。
