viewport元标签缺失会导致响应式失效；需在head中添加且不可被JS移除，input/textarea需box-sizing:border-box+width:100%，表单项须用flex-column堆叠，textarea自适应需JS监听事件并设scrollHeight，触控目标须≥44×44px。
viewport元标签缺失会导致所有响应式失效
没加<meta name="viewport" content="width=device-width, initial-scale=1.0">，width: 100%在移动端就只是撑满浏览器默认的980px虚拟视口，不是真实屏幕宽度。这个标签必须出现在<head>里，且不能被JS动态移除或重复插入。
常见错误包括：引号漏写、content值拼错（比如写成initial-scale=0.1）、或被构建工具误删。用开发者工具Elements面板确认它存在；如果在手机上双指能缩放，基本就是它没生效。
别加user-scalable=no——它既破坏可访问性，iOS Safari也常直接忽略。
input/textarea设width: 100%却撑破容器？
原因有两个：<input>和<textarea>默认是inline元素，且有内置最小宽度（Chrome对type="text"设了约120px）；同时，没重置盒模型时，padding会让实际宽度超过100%。
立即学习“前端免费学习笔记（深入）”；
真正起效的组合是：
-
width: 100%必须配合box-sizing: border-box - 父容器不能是
inline或未设宽的flex项（比如display: flex但没给子项设flex: 1或flex-basis） - 避免只写
max-width: 100%——它不强制收缩，小屏下仍可能溢出
统一写法建议：
input, select, textarea {
width: 100%;
box-sizing: border-box;
}
label和input在小屏上必须堆叠，不能靠flex-wrap自动处理
横向排列的<label><input>在375px屏上必然挤压、折行或截断。flex-wrap: wrap无法解决方向问题，必须显式控制flex-direction。
推荐结构：
- 每个表单项包在
<div class="form-group">里 - 基础样式设
.form-group { display: flex; flex-direction: column; } - 横屏切换用
@media (min-width: 768px) and (orientation: landscape)，而非仅凭宽度——避免iPad竖屏宽屏误判 -
label必须设display: block，否则在flex容器中可能被压扁
注意：flex: 1别同时加在label和input上，否则label会被压缩；只让input占剩余空间。
textarea高度自适应必须用JS，CSS做不到
height: auto对<textarea>无效，CSS无法感知内容行数。纯样式方案必然失败。
最小可行JS逻辑：
- 监听
input和paste事件 - 先设
height: auto清空旧高度 - 再读取
scrollHeight赋值给style.height - 粘贴场景需
setTimeout延迟执行，否则scrollHeight读的是粘贴前的值
<input type="text">不用动态撑高，但必须统一padding和line-height，否则不同浏览器渲染高度不一致，和label垂直不对齐。
最易被忽略的点：所有输入控件的触控目标必须≥44×44px。这不是“体验优化”，而是iOS/Android可访问性合规红线。仅靠font-size或height撑开不行，得靠padding（上下各至少8px）+ border + line-height共同达标。
