用 max-width 替代固定 width 可解决小屏幕弹窗截断问题；需结合 width: 90%、max-width: 480px、touch-action: none、z-index 显式声明及 font-size: clamp() 等方案保障多端适配。
弹窗在小屏幕被截断？用 max-width 替代固定 width
移动端弹窗最常出问题的，就是写死了 width: 500px 这类值——iPhone SE 屏宽才 375px，直接溢出或横向滚动。真正该做的是让宽度随视口弹性收缩，同时保留最小可读性。
-
width: 90%是起点，但别止步于此；加max-width: 480px防止平板上撑太开 - 避免用
min-width: 300px，它会在超小屏（比如折叠屏窄态）强制拉伸内容，破坏体验 - 如果弹窗含表单，
input元素要同步设width: 100%，否则会撑破父容器
媒体查询只写 @media (max-width: 768px) 不够准
单纯按 768px 切分，会漏掉很多真实场景：比如 iPad 竖屏是 768px，横屏却有 1024px；安卓部分折叠屏展开后视口宽度可能达 1200px 但仍是移动环境。关键不是设备类型，而是可用空间是否紧张。
- 优先用
@media (max-width: 480px)处理手机窄屏，这是绝大多数小屏临界点 - 补充
@media (hover: none) and (pointer: coarse)捕获触控设备，比单纯查宽度更可靠 - 不要嵌套多层媒体查询，CSS 会按顺序覆盖，容易误判；把移动端规则写在最后，靠层叠生效
弹窗遮罩层点击穿透？检查 touch-action 和 z-index
iOS Safari 下，遮罩层（.modal-overlay）有时点不中，表面是“没响应”，实际是事件被下层内容劫持了。常见于用了 position: fixed 但没配好交互属性。
- 给遮罩层加
touch-action: none，禁用浏览器默认手势干扰 -
z-index必须显式声明，且比弹窗内容高至少 1 级（例如遮罩z-index: 1000，弹窗主体z-index: 1001） - 避免对遮罩层用
opacity: 0隐藏，它仍会拦截事件；该用visibility: hidden或display: none
字体和按钮在 iOS 上模糊？别信 transform: scale()
有人为适配小屏，对弹窗整体加 transform: scale(0.85)，结果文字发虚、按钮点击热区偏移。这不是缩放问题，是像素对齐失效。
立即学习“前端免费学习笔记（深入）”；
- 改用
font-size: clamp(14px, 4vw, 18px)让字号随视口平滑变化 - 按钮高度统一用
rem或em，避免px在高 DPR 屏上渲染失真 - 如果必须缩放内容区域，用
scale()同时配transform-origin: center，否则边缘裁剪不可控
真正难的不是写几条媒体查询，而是得时刻意识到：移动端没有“标准尺寸”，只有“此刻用户手里的那个尺寸”。每次调完，记得在 Safari 真机上双指缩放试试——那才是最真实的校验方式。
