移动端输入框必须加viewport元标签，否则ios和部分安卓浏览器会默认缩放；需重置input默认样式并禁用autocapitalize、autocorrect等干扰属性；字体设为16px、padding足够保证44px触控热区；聚焦时需避免键盘遮挡，推荐外层容器min-height: 100vh。
移动端输入框必须加 viewport 元标签
不加这行，input 在 iOS 和部分安卓浏览器里会默认缩放，点选时页面突然放大，体验极差。很多人写了样式却忘了这个前提。
在 里加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
其中 user-scalable=no 可选，但对极简场景能避免误操作；如果需要用户缩放（如视力辅助），可去掉它。
input 标签本身要禁用默认样式和交互干扰
原生 input 在移动端自带内边距、圆角、阴影、聚焦高亮，不重置就谈不上“极简”。关键是不能只靠 CSS 重置，还要加属性控制行为。
- 用
type="text"（或type="search"，后者在 iOS 会带清除按钮） - 必须加
autocapitalize="off"和autocorrect="off"，否则 iOS 会自动首字母大写、拼写纠错，破坏简洁感 - 加
spellcheck="false"关闭拼写下划线 - CSS 中设
border: none、outline: none、background: transparent，并用appearance: none清除 Safari 的默认样式
字体与尺寸必须适配手指点击区域
移动端最小可触控区域建议 ≥ 44px，但输入框视觉高度可以更小——只要 padding 足够撑开点击热区。
推荐写法：
input {
font-size: 16px; /* iOS 最小可读字号，不缩放 */
padding: 12px 16px; /* 垂直 12px + 字体 16px ≈ 44px 热区 */
line-height: 1; /* 避免行高额外撑开 */
width: 100%;
box-sizing: border-box;
}
注意：font-size 别设成 14px 或更小，iOS 会强制放大整个页面来迁就它，反而破坏布局。
聚焦时避免页面滚动和键盘遮挡内容
很多极简表单只有一个输入框，但 iOS 键盘弹出会把 input 顶出视口，或者触发意外滚动。这不是 bug，是 Safari 的默认行为。
解决思路有限但有效：
- 确保
input不在position: fixed或absolute的容器里（否则 Safari 失去定位锚点） - 给
body加scroll-behavior: smooth并监听focus事件，手动scrollIntoView({ behavior: 'smooth', block: 'center' }) - 更轻量的做法：在
input外层包一层div，设min-height: 100vh，让内容始终撑满屏幕，键盘弹起时自然留出空间
没有银弹方案，但忽略这点，再简的 UI 也会在真机上卡顿或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
