根本原因是浏览器对transform:scale()只缩放像素图层而不重绘文本矢量轮廓，导致文字模糊、点击热区错位；bootstrap中硬编码的2px边框与rem/em缩放不同步引发视觉变形。
为什么移动端表单输入框在缩放后文字模糊或错位
根本原因是浏览器对 transform: scale() 的渲染处理：它只缩放像素图层，不重绘文本矢量轮廓，导致字体发虚；同时原生 input 的点击热区仍按原始尺寸响应，造成“点不中”或误触。Bootstrap 5 的 .form-control 高度计算（如 calc(1.5em + 0.75rem + 2px)）里那个 2px 是硬编码边框，缩放后和 rem/em 不同步，视觉上就“撑高”或“压扁”了。
用 rem 动态调根字号，而非直接缩放元素
真正可控的方式是接管 :root 的 font-size，让所有基于 rem 的间距、字体、圆角自动联动缩放。但注意：Bootstrap 默认不绑定组件内所有尺寸到根字号，必须补全关键硬编码项。
- 在
上动态设style="font-size: calc(16px * var(--scale, 1));"，例如小屏设--scale: 0.9 - 覆盖
.form-control的border-width：border-width: calc(1px * var(--scale, 1)); - 重写
padding和height中的固定值：height: calc(1.5em + 0.75rem + calc(2px * var(--scale, 1))); - 别忘了
line-height若写死1.2没问题，但若用1.2rem就得同步乘var(--scale)
form-control-sm 在小屏下反而更难读？
form-control-sm 默认 font-size: 0.875rem（约 14px），在 375px 宽手机屏上已逼近可读下限，尤其对老年用户或弱光环境。它还压缩 padding 到 0.25rem 0.5rem，手指点击容错率骤降。
- 小屏慎用
form-control-sm，优先用默认尺寸或微调为font-size: 0.9375rem（15px） - 确保
input、select、textarea均设width: 100%且父容器有max-width: 100% - 移除所有
min-width类或自定义样式——它是小屏输入框溢出的隐形推手 - 给
label加display: block; margin-bottom: 0.25rem;，避免与输入框并排挤占空间
键盘弹出后输入框被遮挡怎么办
移动端浏览器（尤其 iOS Safari）对 position: fixed + 表单聚焦的兼容性差，常导致输入框滚动失效或定位偏移。这不是 CSS 能单点修复的问题，得靠行为干预。
- 绝对避免给表单区域设
position: fixed或overflow: hidden - 监听
focus事件，在 JS 中调用element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 若用
input-group，确保其内部没有flex-wrap: wrap外的强制换行逻辑，否则键盘顶起页面时布局易断裂 - 测试真机，别信 Chrome DevTools 的设备模拟——iOS 键盘高度和滚动惯性行为和桌面完全不同
实际缩放后最易被忽略的点：第三方图标字体（如 Bootstrap Icons）若写死 font-size: 16px，不会随根字号变化；<canvas></canvas> 或内联 SVG 尺寸也不响应 CSS 缩放，需单独用 JS 重设 width/height 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
