ios safari会自动放大小于16px的表单输入框以提升可访问性，导致布局错乱；解决方法包括设置viewport的maximum-scale=1.0和user-scalable=no，并确保表单控件font-size≥16px。
移动端表单输入框被缩放或自动放大
iOS Safari 默认会在用户点击 <input type="text"> 时自动放大表单字段，尤其当字体小于 16px 或没有明确设置 viewport 缩放规则时。这不是 bug，是 Safari 的可访问性策略，但常导致布局错乱。
解决方法很直接：
- 在
中确保<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">—— 注意maximum-scale=1.0和user-scalable=no是关键，仅initial-scale=1.0不够 - 给所有表单控件显式设置
font-size: 16px（或更大），iOS 会因此跳过自动缩放逻辑 - 避免用
rem或em设置过小的字体（如font-size: 0.875rem在某些基础 font-size 下会低于 16px）
触摸目标太小，点击困难
移动端手指点击精度有限，<input>、<label></label>、<button></button> 等可交互元素若物理尺寸太小（尤其高度
实际建议：
-
<input>和<select></select>至少设min-height: 44px，配合padding: 12px 16px保证内边距充足 -
<label></label>必须包裹<input>或使用for属性绑定，且 label 自身要有足够点击区域（不要只靠文字触发） - 避免纯图标按钮无文字说明，或未加
aria-label；即使视觉上只显示图标，也要确保触控区 ≥ 44×44px
键盘类型与输入体验不匹配
移动端软键盘类型由 input 的 type 和 inputmode 共同决定。只设 type="number" 并不能保证唤起数字键盘（比如 iOS 上可能仍出全键盘），而 inputmode 才是更可靠的提示。
常见组合示例：
- 手机号：
<input type="tel" inputmode="numeric">——type="tel"触发电话键盘，inputmode="numeric"进一步约束为纯数字 - 邮编：
<input type="text" inputmode="numeric" pattern="[0-9]*">——type="text"避免日期/邮箱等干扰，pattern辅助校验 - 搜索框：
<input type="search" inputmode="search">—— 唤起带「搜索」键的键盘，且部分浏览器自动添加清空按钮 - 禁用自动首字母大写：
autocapitalize="none"，尤其对密码、邮箱等字段必须加
提交失败后焦点与错误反馈不可见
移动端屏幕小，表单验证失败后若只靠颜色变化或悬浮 tooltip 提示，用户很可能看不到错误在哪。而且 Safari 在 submit 失败后不会自动将焦点移到首个错误字段，用户得手动滚动查找。
实操要点：
- 提交失败后，用
element.focus()主动聚焦第一个无效字段，并配合scrollIntoView({ behavior: 'smooth', block: 'center' })滚动到可视区域 - 错误文案不要仅靠 color 区分，加图标（如 ❌）、背景色（
background-color: #fff8f8）和明确文字（“请输入有效邮箱”而非“格式错误”） - 避免在
blur时立即校验——移动端切换字段频繁，易造成干扰；更适合在submit或change（配合防抖）时统一校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
