手机表单需设父容器flex-direction: column并配合max-width:100%、flex-shrink:0及显式line-height等避免iOS/Android渲染差异导致错位、溢出或文字偏移。手机上表单字段挤成一排怎么办Flexbox 默认是 flex-direction: row桌面端看着整齐手机一缩就溢出或文字折断。这不是“没适配”是没关掉默认横向布局。所有表单项父容器加 display: flex 的同时必须显式设 flex-direction: column别依赖媒体查询“等屏幕小了再改”直接在基础样式里写死 flex-direction: column再用 media (min-width: 768px) 升级为横排label 和 input 套在同一层 div 里否则 flex-direction: column 对它们不起作用输入框宽度在iOS上忽大忽小iOS Safari 对 input[typetext] 有默认最小宽度约 150px加上 flex 的自动伸缩经常撑开整个容器。不是 bug是渲染策略。给 input 加 flex: 1 或 width: 100%但必须配合 max-width: 100%禁用 iOS 自动缩放input { -webkit-appearance: none; }否则圆角/内边距会干扰 flex 计算如果用了 rem 或 em 设宽确保根字体大小没被 viewport 缩放干扰检查 meta nameviewport 是否含 user-scalableno提交按钮和输入框错位或换行异常常见于 button 没设 flex-shrink: 0或者 input 有 margin 导致总宽超 100%。Flex 容器不会自动“忽略” margin。按钮统一加 flex-shrink: 0防止被压缩变形所有子元素label、input、button外边距用 margin-bottom 控制间距别混用 margin-top避免在 input 上设 padding-left 同时又设 box-sizing: content-box——移动端计算更敏感容易触发重排错位Android Chrome 里 placeholder 文字偏上不是对齐问题是 line-height 和 padding 在不同引擎下解析不一致。Flex 布局放大了这个差异。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。