Modal文字自动缩放应使用ResizeObserver监听.modal-body尺寸，以clientWidth为主动态计算px字号，配合节流、缓存和viewport锁定确保稳定。
Modal里文字自动缩放：别用CSS媒体查询硬调
Bootstrap Modal本身不提供文字自适应缩放功能，直接写font-size: clamp()或vw单位看似可行，但容易在不同屏幕宽高比下失衡——比如竖屏手机上文字突然变小，而Modal内容区高度有限时反而撑出滚动条。
真正稳定的做法是用JavaScript监听Modal内容尺寸变化，动态计算字号。核心逻辑是：给定最大字号、最小字号和容器宽高阈值，按较紧约束（宽或高）缩放。
- 优先以
clientWidth为基准（宽度通常比高度更易成为瓶颈） - 避免监听
resize全局事件，改用ResizeObserver只观察Modal body - 首次渲染后立即执行一次计算，防止初始字号过大溢出
用ResizeObserver实现响应式字号
Bootstrap 5+ 的Modal结构中，内容区域通常是.modal-body，把它作为观测目标最稳妥。注意不要观测整个.modal，否则背景遮罩层变化也会触发回调，造成不必要的重算。
const modalBody = document.querySelector('.modal-body');
if (modalBody) {
const ro = new ResizeObserver(() => {
const width = modalBody.clientWidth;
const height = modalBody.clientHeight;
// 按宽度缩放为主，保留最小字号兜底
const fontSize = Math.max(12, Math.min(24, width / 20));
modalBody.style.fontSize = `${fontSize}px`;
});
ro.observe(modalBody);
}
这里width / 20是经验值：假设16px字号对应320px宽容器，比例大致合理；Math.max(12, ...)防字号过小看不清，Math.min(24, ...)防默认字号被意外放大。
避免字体抖动和重绘开销
频繁修改style.fontSize会触发layout，尤其当Modal内还有图片、SVG等异步加载内容时，可能造成文字反复缩放。必须加节流和状态缓存。
- 用
requestAnimationFrame包裹更新逻辑，确保只在下一帧执行 - 记录上一次计算的字号，仅当变化超过0.5px才写入
style - Modal隐藏时调用
ro.unobserve(modalBody)，显式销毁观察器 - 如果Modal支持多语言（如中英文混排），字号计算应基于
scrollWidth而非clientWidth，因为中文换行行为影响实际占位
移动端特殊处理：禁用viewport缩放干扰
某些安卓WebView或旧版iOS Safari在Modal弹出时会触发viewport重计算，导致clientWidth突变。此时单纯依赖尺寸观测不可靠。
稳妥做法是在Modal显示前临时锁定viewport：
document.querySelector('meta[name="viewport"]').setAttribute(
'content',
'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
);
Modal关闭后再恢复原content值。这个操作必须在show.bs.modal事件中做，不能放在shown.bs.modal——后者已晚于首次渲染。
真正麻烦的是字体渲染一致性：Chrome和Safari对rem与px混合缩放的处理差异很大，所以全程坚持用px单位设置fontSize，别试图用rem配合根元素动态调整。
