最近在帮朋友优化一个健康问卷的小程序，页面在电脑上看着挺正常，可一到手机上就出问题——点输入框的时候，光标老是跑偏，文字显示错位，用户填着填着就放弃了。这种问题看似小，实际影响不小，尤其在健康类应用里，用户可能正着急填信息预约体检，结果因为一个输入框卡住，直接关掉了。
为什么移动端光标会错位？
很多人第一反应是浏览器兼容问题，其实更多时候是页面布局和样式设置不当导致的。比如，给 input 框设置了固定高度，又用了 line-height 或 padding 不当，再加上移动端键盘弹起时视口变化，光标位置就会计算错误。
还有一个常见情况是页面用了 transform 缩放，或者父级元素有 translate 动画，这时候 input 元素的真实坐标和视觉坐标对不上，系统定位光标就容易出偏差。
字体和 zoom 的隐形影响
有些页面为了适配不同屏幕，给 body 加了 zoom: 0.8 或者用 rem 做动态缩放。这在 PC 上没问题，但在 iOS Safari 上，zoom 会影响文本输入框的光标渲染位置。字体如果不是标准的 sans-serif，比如用了某些自定义字体，加载过程中也可能造成重排，进一步加剧错位。
简单的修复方式
先检查所有输入框的样式，避免使用 transform 来调整位置。如果必须用，考虑换成 margin 或 flex 布局。确保 input 的 height、line-height 和 font-size 配合得当，别让文字“挤”在框里。
可以尝试给输入框加上以下样式：
.input-field {<br> caret-color: #000; <!-- 明确光标颜色，便于观察 --><br> outline: none;<br> border: 1px solid #ddd;<br> font-size: 16px; <!-- 避免过小字体 --><br> line-height: 1.5;<br> padding: 10px;<br> height: auto; <!-- 避免固定高度挤压 --><br>}另外，在 iOS 设备上，如果页面启用了 viewport 的 initial-scale=1.0，但又用了 JavaScript 动态调整缩放，也会干扰输入框的定位。建议保持 viewport 稳定，不要在用户输入时改变页面缩放。
测试别只看模拟器
很多开发者习惯用 Chrome 的设备模拟器调试，但真实手机上的表现可能完全不同。特别是安卓厂商定制的键盘（比如小米、华为的输入法），处理光标的方式和原生键盘不一样。最好拿几台主流机型真机测试，尤其是老款 iPhone 和千元安卓机，问题更容易暴露。
有个小技巧：在输入框获得焦点时，临时把页面其他动画和 fixed 定位元素隐藏，看看是否缓解错位，能帮助快速定位是不是布局干扰了光标渲染。