textarea的rows和cols属性表示字符单元格数而非像素，仅影响初始渲染尺寸，需配合css（如min-height、width）和js（动态调整高度）实现精确可控布局。
textarea 的 rows 和 cols 属性不是像素值，而是字符单元格数
直接写 rows="10" 表示“默认字体下大约能显示 10 行等高文本”，cols="50" 表示“单行最多容纳约 50 个英文字符宽度”。这个计算依赖浏览器的默认等宽字体（通常是 monospace）和当前字号，实际高度会随字体、行高、内边距变化。所以它不等于 CSS 的 height 或 width，也不能靠它做精确布局。
常见错误是以为设了 rows="5" 就一定能撑开 5 行高度，结果发现内容少时区域被压缩、内容多时又溢出滚动——这是因为 rows 只影响**初始渲染尺寸**，不控制最小/最大高度行为。
- 如果想让
<textarea></textarea>始终显示 5 行且不收缩，需额外加 CSS：min-height: calc(1.2em * 5)（注意用line-height实际值替换1.2em） -
cols对中文影响小，但对等宽字体下的英文/数字更准；非等宽字体（如 sans-serif）下，cols="30"可能只显示 25–28 个汉字 - 移动端 Safari 有时忽略
cols，优先用 CSS 控制宽度更可靠
用 CSS 替代或补充 rows/cols 更可控
现代项目中，纯靠 HTML 属性很难满足响应式或设计系统要求。推荐用 CSS 控制尺寸，把 rows 和 cols 当作降级 fallback。
例如：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<textarea rows="4" cols="50" style="width: 100%; min-height: 4.8em; max-height: 200px; resize: vertical;"></textarea>
-
min-height比rows更稳定，尤其配合line-height: 1.2时可精确对应行数 -
resize: vertical允许用户手动拉伸，但禁用水平拉伸避免破坏布局 - 去掉
cols改用width+box-sizing: border-box，避免边框/内边距导致宽度溢出
动态调整行数：监听输入并自动扩展高度
用户输入换行或文字变多时，固定 rows 会导致滚动条遮挡内容。自动撑开需要 JS 监听 input 事件并重设 height。
核心逻辑是：用一个隐藏的 <div> 模拟 textarea 内容（同字体、行高、内边距），测其 <code>scrollHeight，再赋给 textarea。
- 不要直接用
textarea.scrollHeight，它包含滚动区，不准确 - 必须同步复制
font-family、font-size、line-height、padding到模拟元素 - 为防抖动，建议节流处理（如 100ms 内只更新一次）
- 设置
overflow: hidden防止双滚动条出现
兼容性与可访问性注意事项
rows 和 cols 是 HTML 标准属性，所有浏览器都支持，也是屏幕阅读器识别文本域容量的重要依据。即使你用 CSS 覆盖了尺寸，也应保留这两个属性。
- 省略
rows会导致部分旧浏览器（如 IE8）渲染成极矮区域，影响可用性 - 设
rows="1"并不等价于单行输入框（<input type="text">），语义和键盘行为（如 Enter 是否换行）完全不同 - 若用 JS 动态控制高度，记得在初始化时也触发一次调整，否则首屏可能显示不全
真正难的不是设几个数字，而是理解这些数字背后依赖的渲染上下文——字体、行高、盒模型、用户缩放、甚至系统字体替换都会让它偏移。留好 fallback，再叠加 CSS 和 JS 控制，才不容易在某个设备上突然“塌掉”。
