弹窗需用width: 90% + max-width: 480px + margin: 20px auto确保适配，子元素须设max-width: 100%、word-break: break-word、width: 100%防溢出，小屏通过媒体查询调padding/font-size/line-height，动画需加transform-origin: center和touch-action: none。
弹窗宽度超出屏幕：别写死width: 500px
iPhone SE 屏宽仅 375px，硬写 width: 500px 必然触发横向滚动或右侧裁切。真正有效的组合是：width: 90% + max-width: 480px，二者缺一不可。width: 90% 保证小屏有呼吸感，max-width: 480px 防止平板上撑太开。margin: 20px auto 也必须加，否则 Safari 下右侧常被意外截断。若需更平滑过渡，可用 width: clamp(300px, 90%, 480px)，但注意 iOS 14.5 以下不支持三值 clamp()。
内部内容撑破边界：图片、表单、长文本要各自设防
弹窗容器缩放再好，子元素没约束照样溢出。重点盯住三类高危元素：
-
img必须加max-width: 100%和height: auto，否则原始尺寸直接顶破父容器 - 长 URL 或 JSON 字符串用
word-break: break-word（别依赖overflow-wrap，部分 Android 浏览器不认） -
input、textarea等表单控件显式设width: 100%，否则默认继承计算宽度，极易引发横向滚动
根容器建议加 overflow: hidden，滚动区域单独用 max-height + overflow-y: auto 控制。
小屏字体与内边距难读：靠媒体查询微调“视觉密度”
只调宽度不够，padding、font-size、line-height 这些“密度参数”不跟着缩，小屏体验依然差——文字挤成一团，按钮点不到。
- 在
@media (max-width: 480px)中把padding从30px降到16px，标题font-size从24px缩到18px，正文统一用14px - 按钮
height同步缩到36px，保持比例协调；禁用line-height: 24px这类固定值，改用无单位数值如line-height: 1.4 - 慎用纯
vw写法（如font-size: 3.75vw），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(0.95)易导致像素对齐失准，可加will-change: transform或提前声明transform: translateZ(0)
最易被忽略的是：所有这些调整都得在 .modal-dialog 根选择器上生效，而不是只作用于内容区——一旦漏掉，整个响应逻辑就断层了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
