必须写<meta name="viewport" content="width=device-width, initial-scale=1.0">，它是移动端渲染强制开关；width=device-width动态匹配设备逻辑像素宽度，initial-scale=1.0防止iOS Safari自动缩放导致字体模糊和点击偏移，禁用user-scalable=no以保障可访问性。
viewport meta 标签必须写对
不加或写错 <meta name="viewport">，表单在手机上永远缩成一团、点不准、文字小得看不清。最简但有效的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意：width=device-width 不能写成 width=375 或 width=100%；initial-scale=1.0 别漏掉，否则 iOS Safari 可能默认放大页面。有些项目会加 user-scalable=no，但会损害可访问性，除非有强交互约束，否则别加。
input 宽度用 max-width 配合 width: 100%
只写 width: 100% 在某些安卓浏览器里会撑破容器（尤其带 padding 的父元素），导致横向滚动。正确做法是：
input, select, textarea {<br> width: 100%;<br> max-width: 100%;<br> box-sizing: border-box;<br>}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: border-box必须设，否则 padding 和 border 会额外增加宽度 -
max-width: 100%是防溢出的保险绳，不是可选项 - 避免给
input设固定px宽度（比如width: 300px），那在小屏上必然溢出
label 点击区域要够大，别只包 text
手机端手指点击精度有限，如果 <label> 里只包了文字，实际可点区域就只有文字大小——极易点歪。正确写法是让 label 包住整个输入控件，或显式扩大点击范围：
<label><br> 用户名<br> <input type="text" name="username"><br></label>
或者用 for + id 关联，但 label 必须有足够内边距：
label {<br> display: block;<br> padding: 12px 0;<br> margin-bottom: 8px;<br>}
常见错误：把 <label> 当纯文本容器，不设 display: block 或 padding，结果用户反复点三四次才触发 focus。
submit 按钮别用固定 height，优先用 padding 控制尺寸
写 height: 44px 在 iPhone SE 上可能刚好，在 Pixel 5 上就显得矮胖。更稳妥的是用 padding + font-size 组合：
button[type="submit"] {<br> padding: 12px 20px;<br> font-size: 16px;<br> min-height: 44px;<br>}
说明：
-
min-height保底，防止字体缩小时按钮塌陷 -
padding提供真实触控面积，iOS 建议垂直方向 ≥ 44px - 避免
line-height单独撑高按钮——在部分 Android 浏览器中 line-height 行为不一致
复杂点在于不同机型对 touch target 的判定逻辑略有差异，所以 padding 比 height 更可靠；另外，别忘了给按钮加 touch-action: manipulation 减少点击延迟。
