移动端表单键盘不弹出、缩放异常、光标错位等问题，主因是各平台对input类型、focus机制及可访问性规则处理不一致；应优先用type="text"+inputmode、设font-size≥16px、动态调整textarea高度并防抖、提交后双重blur释放焦点。
手机浏览器里 input 拉不开键盘？检查 type 和 autofocus
很多表单在 ios 或安卓 chrome 里点不动、不弹键盘，根本原因不是样式问题，而是浏览器对某些 input 类型做了主动拦截。比如 type="number" 在 ios 上可能拒绝聚焦，type="email" 在旧版 android webview 里会直接忽略 autofocus。
实操建议：
- 默认用
type="text"，再配合inputmode="numeric"或inputmode="email"——这是现代方案，既保键盘类型，又不触发输入法限制 - 避免依赖
autofocus自动唤起键盘，移动端多数浏览器（尤其微信内置浏览器）会静默忽略它；改用用户点击后element.focus()主动调用 - 确保元素可交互：没有
pointer-events: none、父级没遮罩层、没被disabled或readonly锁死
iOS Safari 表单文字太小、自动缩放怎么关？
iOS Safari 默认会对小于 16px 的表单控件强制放大，导致布局错乱、文字突兀。这不是 bug，是它的“可访问性保护”机制，但常被误认为样式失效。
实操建议：
- 给所有
input、select、textarea加上style="font-size: 16px;"——低于这个值就大概率触发缩放 - 在
<head>里加 viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，其中maximum-scale=1.0是关键，缺了它缩放控制无效 - 别信
-webkit-text-size-adjust: none，iOS 10+ 已废弃，且对表单控件基本不起作用
微信内置浏览器里 textarea 换行丢失、光标错位
微信 Android 版（尤其是 8.0.x）的 X5 内核对 textarea 的 height 和 autoresize 处理极不稳定，常见现象是输入换行后内容截断、滚动条卡死、光标停在第一行末尾不动。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 放弃用
height控制高度，改用min-height+max-height+overflow-y: auto - 监听
input事件，用scrollHeight动态设style.height，但要加防抖（setTimeout延迟 50ms），否则频繁重排导致卡顿 - 微信里慎用
placeholder含换行符（\n），X5 内核会直接忽略整段 placeholder
表单提交时安卓原生键盘不收起？手动触发 blur() 不够
很多开发者调用 input.blur() 就以为键盘会收，但在部分安卓机型（如华为 EMUI、小米 MIUI）上完全无效——因为焦点其实还在 document.activeElement，只是没显示光标。
实操建议：
- 提交前先
input.blur()，再立即执行document.body.blur()，强制释放全局焦点 - 更稳妥的做法：提交后用
setTimeout(() => { document.activeElement?.blur(); }, 100)，等渲染帧完成再清 - 如果用了 Vue/React 等框架，注意不要在异步回调里直接操作 DOM 元素引用（比如 ref 已销毁），优先通过状态控制显隐，而非依赖 DOM 方法
跨平台表单最麻烦的从来不是样式，而是每个环境对“可聚焦”“可编辑”“可缩放”的定义都不一样。iOS 认为小字号必须放大，安卓 WebView 可能根本不认 inputmode，微信 X5 又另有一套解析逻辑——适配不是写一次，而是按设备+内核+版本去逐个验证行为。
