密码输入框光标偏移、字体模糊需统一font-family、禁用自动缩放、固定line-height、慎用rem；密码按钮应设最小触控尺寸、启用touch-action、添加视觉反馈；强度提示宜用JS动态定位；自动填充样式可通过autocomplete="new-password"或超长transition规避。
密码输入框在iOS/Android上光标偏移、字体模糊怎么办
根本原因是系统键盘接管输入后，会强制重设输入框的渲染上下文，尤其在高DPR设备（如iPhone）上，font-size、line-height和padding的微小不匹配会被放大成明显错位或文字发虚。
- 统一设置
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;，避免iOS用San Francisco、安卓用Roboto导致行高计算偏差 - 禁用系统自动缩放：在
上加style="-webkit-text-size-adjust: 100%;"，防止iOS Safari因字体过小自动放大 - 固定行高：显式声明
line-height: 1.5;（不用normal），并确保height与line-height差值能被2整除，避免光标垂直居中漂移 - 慎用
rem控制密码框尺寸——根字体若按屏幕宽度动态计算，在横屏切换时可能突变，推荐用vh或px定高，宽度用vw保比例
密码可见按钮点击区域太小，触摸反馈弱
安卓低端机和iPhone SE这类小屏设备上，默认尺寸常不足44×44pt（苹果推荐最小触控区），导致误点、无响应，用户感知为“按钮失灵”。
- 给密码显示按钮加
min-width: 44px; min-height: 44px;，并用padding撑开内部图标，而非仅靠font-size - 启用
touch-action: manipulation;，缩短iOS上click延迟，让点击反馈更即时 - 用
:active伪类配合transform: scale(0.95);提供视觉压感，别只改背景色——颜色变化在强光下不可见 - 按钮图标用
内联，避免width/height属性，不依赖viewBox自适应
密码强度提示在不同浏览器里位置飘移
基于::after生成内容或绝对定位的提示层，在Chrome、Safari、WebView（尤其小程序内嵌）中计算基准不同：有的以输入框border-box为参考，有的以padding-box，导致提示气泡悬空或遮挡光标。
- 放弃
position: absolute+top: 100%这种“凭感觉”的定位，改用position: relative包裹输入框，再对提示层设position: absolute; bottom: -24px;（固定负偏移） - 用
getBoundingClientRect()在JS中实时读取输入框位置，动态设置提示层left，比纯CSS更可靠（尤其适配刘海屏、挖孔屏） - 所有提示文字用
font-size: 12px;起步，低于12px在部分安卓机型上会强制放大，破坏布局节奏 - 避免在
input:focus时用transform: translateZ(0)触发硬件加速——这会让部分安卓WebView把提示层渲染到错误图层
密码粘贴后自动填充样式覆盖自定义UI
Chrome和Edge会在密码框检测到自动填充时，给input:-webkit-autofill加一层黄色底色和深色文字，直接覆盖你写的background和color，且该伪类无法用常规CSS优先级覆盖。
立即学习“前端免费学习笔记（深入）”；
- 用
transition: background-color 5000s ease-in-out 0s;这种“超长过渡”骗过浏览器，让它认为背景色正在缓慢变化，从而取消自动填充高亮 - 更稳妥方案：在
input上加autocomplete="new-password"（注意不是off，后者已被现代浏览器忽略） - 如果必须支持密码管理器，就接受自动填充样式，并提前用
::-webkit-autofill重置它：input:-webkit-autofill { background: #fff !important; color: #333 !important; } - 别在
autofill状态下做字体大小动画——iOS Safari会卡顿甚至崩溃
!important，一处禁用transform，一处用JS兜底——不是代码不优雅，而是现实需要这样搭桥。 
