Modal文字不随窗口缩放的解决方案是使用vmin单位设置font-size（如3.2vmin），配合text-align控制对齐、无单位line-height、独立选择器区分标题/正文/按钮字号，并为.modal-body添加min-height: 60vh防塌陷；iOS旧版需@supports降级。
Modal内文字不随窗口缩放，怎么办？
bootstrap原生modal不提供文字自动缩放能力，font-size默认是固定值（如1rem），窗口缩小时文字不会缩小，容易溢出或换行错乱。这不是bug，是设计使然——bootstrap把排版控制权留给开发者，避免响应式字体干扰布局稳定性。
真正可行的解法不是改Bootstrap源码，而是用CSS视口单位+弹性容器组合控制：
-
vw或vmin设font-size（比如font-size: 4vmin），让字号随视口最小边等比缩放 - 给文字容器加
text-align: center或text-align: justify确保对齐行为可控 - 禁用
white-space: nowrap（如果用了）否则缩放后可能横向溢出 - 慎用
line-height固定值，建议用无单位数值（如1.4）保持缩放一致性
为什么vw比rem更适合Modal文字缩放？
rem依赖根元素font-size，而Modal常被动态插入到body末尾，此时根字号可能已被其他脚本修改，导致缩放比例失准；vw直接锚定视口宽度，更稳定。
但要注意：100vw包含垂直滚动条宽度（约17px），实际可用宽度略小。更稳妥的做法是用vmin——取vw和vh中较小值，避免窄高屏（如手机横屏）下文字过大撑破Modal：
.modal-body .scalable-text {
font-size: 3.2vmin;
text-align: center;
}
实测3.2vmin在手机竖屏（375×812）下约12px，桌面屏（1920×1080）下约61px，视觉大小过渡自然。
Modal标题/正文/按钮字体缩放要统一吗？
不要强制统一。标题、正文、按钮承担不同信息层级，缩放逻辑应分离：
- 标题用
4.5vmin——需突出，但上限建议设max-font-size: 28px防桌面端过大 - 正文用
3.2vmin——主信息流，保持可读性底线（不低于12px） - 按钮文字用
2.8vmin——操作控件，过大会挤压点击区域
关键点：必须为每类文字单独写选择器，避免父容器font-size继承污染。例如.modal-title和.modal-body p不能共用同一规则。
移动端iOS Safari上文字缩放失效？
这是常见坑：iOS Safari对vmin支持从iOS 13.4开始，旧版本会回退到浏览器默认字号。检测方法很简单——打开DevTools模拟iOS 12设备，看文字是否卡死在16px。
兼容方案只有两个有效路径：
- 加
@supports (font-size: 1vmin)媒体查询，旧版走rem降级（配合html根字号JS动态调整） - 直接放弃自动缩放，改用
media query分段设置（如@media (max-width: 480px) { font-size: 14px; }）
别信“加-webkit-text-size-adjust: none就能解决”——这只会禁用用户手动缩放，违反可访问性规范，且不影响vmin解析。
最常被忽略的是Modal内容区高度未设min-height，导致小屏下文字缩得太小，整块区域塌陷——务必给.modal-body加min-height: 60vh兜底。
