rows和cols是近似值，非像素单位，仅按默认等宽字体下字符数估算；现代项目应优先用CSS控制尺寸，rows/cols仅作语义fallback，需配合min/max-height、resize、box-sizing等确保可预期、可扩展、可交互。
textarea 的 rows 和 cols 是近似值，别当像素用
直接写 rows="5 或 cols="40" 只是按等宽字体估算的行数和字符宽度，不是精确像素。比如 cols="50" 在 font-family: "Microsoft YaHei" 下实际可能只有 300px 宽，换成 monospace 才接近预期。中文输入时更明显：一行塞不下 50 个字，但 cols 不会自动换行或截断。
常见翻车点：
- 在 Flex 容器里写
cols="100"，结果 textarea 被压成一条细线 - 改了
font-size: 16px后，rows="4"看起来只剩 2 行高 - 用 JS 动态赋值
textarea.rows = 8，但之前设了style.height，这个赋值就完全失效
CSS 控制尺寸比 rows/cols 更可靠
现代项目中，rows 和 cols 唯一靠谱的用途是给屏幕阅读器提供语义 fallback，真实布局必须靠 CSS。关键组合如下：
- 用
width: 100%或具体值（如width: 500px）控宽度 - 用
min-height: 80px+max-height: 200px控高度范围，防无限拉伸 - 加
resize: vertical允许用户手动调高，或resize: none禁用（此时min-height必须足够） - 务必加
box-sizing: border-box，否则padding会让内容区变窄
别写 height: 100px 直接固定高度——内容一多就出现滚动条，体验突兀；也别只写 width: 100% 却漏掉 box-sizing，padding 会撑出横向滚动。
立即学习“前端免费学习笔记（深入）”；
想让 textarea 随内容自适应高度？scrollHeight 是唯一稳解
height: auto 对 textarea 无效，CSS 读不了文本行数。必须用 JS 监听 input 事件，靠 scrollHeight 动态设置高度：
- 每次触发前先设
textarea.style.height = 'auto'，清掉旧高度干扰 - 再读
textarea.scrollHeight，赋给style.height - iOS Safari 有延迟，加
setTimeout(update, 0)绕过 - 粘贴大段文本时，
paste事件后需延时再更新，否则scrollHeight拿不到最新值
别用 offsetHeight 或 clientHeight——它们不包含溢出部分，撑不开。
移动端输入框缩放和聚焦遮挡必须提前处理
iOS Safari 会自动放大 font-size < 16px 的输入框，导致页面重排、键盘遮挡表单。这不是 bug，是辅助功能策略：
- 强制设
font-size: 16px，哪怕设计稿要求 14px 也得妥协 - 加
-webkit-text-size-adjust: 100%防止系统干预字号 - 焦点时调用
textarea.scrollIntoView({block: 'nearest'})，避免键盘弹出后 input 被盖住 - 别用
transform: scale()调大小——会破坏点击热区和 focus 状态
真正麻烦的不是怎么调尺寸，而是不同设备对同一段 CSS 的解释差异：IE11 不支持 min-height 在 textarea 上生效，resize 也无效，这时 rows 才是最后锚点，但数值必须实测校准，不能照搬桌面端经验。
