弹窗宽度超出屏幕的正确解法是同时使用width: 90%和max-width: 480px，并配合margin: 20px auto居中；需约束内部图片、表单及长文本，小屏下用媒体查询调小padding与font-size，且z-index须显式声明足够高。
弹窗宽度超出屏幕，直接用 width: 90% + max-width 组合
固定写死 width: 500px 是最常见错误——iPhone SE 屏宽仅 375px，必然横向滚动或内容被裁。真正有效的写法是让宽度既弹性又可控：width: 90% 保证小屏有足够边距，max-width: 480px 防止平板上撑太开。这两条必须同时存在，缺一不可。
-
margin: 20px auto必须加，否则右侧可能被裁切（尤其 Safari） - 避免设
min-width: 300px，它会在折叠屏窄态下强制拉伸，破坏布局流 - 如果用
clamp()，写成width: clamp(300px, 90%, 480px)更平滑，但注意 iOS 旧版不支持三值 clamp
弹窗内部元素撑破边界，关键要约束子级
弹窗容器缩放好了，内容仍溢出？问题往往出在内部元素没受控。图片、长单词、表单输入框最容易突破父容器。
-
img必须加max-width: 100%和height: auto，否则原始尺寸会顶破弹窗 - 长 URL 或技术字符串加
word-break: break-word，别依赖overflow-wrap——部分 Android 浏览器不认 -
input、textarea等表单控件要显式设width: 100%，否则默认 width 会继承父级计算值，常导致横向滚动 - 弹窗根容器建议加
overflow: hidden，滚动区域单独用max-height+overflow-y: auto
字体和内边距在小屏下难读，靠媒体查询微调
width 和 max-width 解决了宽度问题，但字号、padding、按钮高度这些“视觉密度”参数不调，小屏体验依然差——文字挤成一团，按钮点不到。
- 在
@media (max-width: 480px)里把padding从30px降到16px，标题font-size从24px缩到18px，正文统一用14px - 按钮
height同步缩到36px，保持比例协调；禁用line-height固定值，改用无单位数值（如line-height: 1.4） - 慎用
font-size: 3.75vw这类纯 vw 写法——iPhone SE 上会缩到 12px，可读性崩坏；改用font-size: clamp(14px, 4vw, 18px)
缩放动画触发模糊或定位偏移，transform-origin 和 touch-action 得配齐
用 transform: scale() 做弹出动画时，常出现文字发虚、动画结束位置偏移、双击误触浏览器缩放等问题——这不是 bug，是没配关键属性。
立即学习“前端免费学习笔记（深入）”；
-
transform-origin: center（或显式写50% 50%）确保缩放锚点稳定，避免从左上角“炸开” - 移动端必须加
touch-action: none，否则手指双击可能触发浏览器默认缩放，打断你的动画 - 非整数 scale（如
scale(0.95)）易导致像素对齐失准，加will-change: transform或transform: translateZ(0)可缓解 -
transition必须写在默认状态（如.modal { transition: transform 0.3s ease; }），不能只写在.modal.open里，否则首次打开无动画
z-index 必须显式声明且足够高（至少 9999），否则在某些安卓 WebView 中会被系统 UI 或键盘遮挡；还有就是所有缩放逻辑都依赖视口正确，务必确认 <meta name="viewport" content="width=device-width, initial-scale=1"> 已存在且未被其他脚本覆盖。 
