如何用CSS让表单标签在窄屏下仍然清晰易读？

iPhone SE 上 label 文字模糊挤成一团，根本原因是布局未响应式断行、行高不足、CSS 缩放干扰，而非 DPI 或字体大小问题。

窄屏下 label 文字模糊、挤成一团、点击区域小——根本不是字体没放大，而是布局没断开、行高没撑开、缩放被干扰。

label 在 iPhone SE 上文字糊成一块怎么办

这不是 DPI 问题，是浏览器在小屏上对 font-size

1. 所有 label 必须设 font-size: 16px 或更大，别信“14px 看着也清楚”，它会触发缩放
2. 别给 label 加 transform: scale(0.9) 或 zoom，这些会让文本渲染降级
3. 确保 viewport meta 没禁用缩放：<meta name="viewport" content="width=device-width, initial-scale=1">，user-scalable=no 已被 iOS 忽略且损害可访问性

小屏下 label 和 input 堆叠后文字折行、截断

横向并排的 label+input 切到垂直堆叠时，如果 label 没清掉原来的 margin-right 或 white-space: nowrap，就会在窄屏下文字强行换行、甚至被截断。

1. 窄屏媒体查询里必须重置 label 的宽度和间距：label { min-width: auto; margin-right: 0; }
2. 长 label 文字（如“请填写您在本平台注册时使用的手机号”）要加 word-break: break-word，别用 overflow: hidden 直接砍掉
3. 如果 label 含图标或 badge，用 display: flex; align-items: flex-start 防止基线错位导致文字上浮

为什么加了 font-size 还是看不清？检查这三处

光调大字号不够，label 的可读性还卡在三个隐性环节上：

1. line-height 小于 font-size：至少设为 1.4，否则多行文字粘连
2. color 对比度不足：用 color: #333 或更暗，别用 #666，WCAG AA 要求文本对比度 ≥ 4.5:1
3. 父容器有 transform: translateZ(0) 或 will-change: transform：某些 Android WebView 下会导致 subpixel 渲染失效，文字发虚，去掉再试

最常被忽略的是：label 不是独立元素，它的清晰度依赖于和 input 共享的视觉节奏——行高、间距、对齐方式必须同步调整，而不是只改一个地方就以为搞定。