field-sizing: content不能用于移动端textarea高度自适应，因其非标准属性、未被任何浏览器支持；textarea自适应必须依赖min-height/max-height、height: auto、box-sizing: border-box配合JS动态设置scrollHeight，并处理iOS输入法与键盘弹起等兼容性问题。
field-sizing: content 在当前（2026年4月）**不能用于实现移动端 textarea 高度自适应**——它根本不是标准 CSS 属性，也未被任何浏览器支持。
为什么 field-sizing: content 是个误导性说法？
这个写法混用了两个概念：field-sizing 是 Chrome 125+ 实验性支持的 表单控件内部尺寸策略（仅对 <input type="number"> 等少数原生控件生效），而 content 并非其合法取值；textarea 完全不在该属性的支持列表中。所有声称靠它实现自适应的教程或文章，要么是误传，要么把 height: fit-content 或 resize: none 等其他样式错标为 field-sizing。
textarea 自适应真正依赖的核心 CSS 和 JS 组合
-
min-height和max-height必须用 CSS 显式设置，否则空值时高度塌缩、长内容时页面崩开 -
height: auto是 JS 动态调整前的必要重置步骤，不是单靠它就能生效的“开关” -
box-sizing: border-box要显式声明，否则 padding/border 会额外叠加在scrollHeight之外，导致高度偏大 -
overflow: hidden必须加，同时禁止resize: both或resize: vertical，否则用户拖拽会破坏 JS 控制逻辑
移动端最易失效的三个 JS 细节
iOS Safari 对 scrollHeight 的读取有延迟，尤其在中文输入法候选阶段或键盘弹起瞬间：
- 不加
requestAnimationFrame直接赋值，会导致高度计算滞后一帧，出现“文字已换行、框还没长高”的跳动 - 只监听
input事件不够——iOS 上拼音未上屏时input已触发，但scrollHeight还没更新；需配合compositionstart/compositionend做状态标记 - 键盘弹起时视口缩放（
visualViewport变化）会让scrollHeight瞬间失准；必须监听resize事件并触发一次重算
真正可靠的方案仍是：CSS 设好 min-height/max-height/box-sizing，JS 用 requestAnimationFrame 包裹 style.height = 'auto'; style.height = scrollHeight + 'px'，再补上 composition 和 resize 的兜底逻辑。别信“一行 CSS 解决”的捷径——它不存在。
立即学习“前端免费学习笔记（深入）”；
