cols 属性在不同字体下宽度不一致，因其本质是基于等宽字体的字符数估算，而非像素值；浏览器默认用 monospace 计算，但自定义 font-family 后无法动态适配当前字体的 ch 宽度，导致实际显示宽度偏差显著。
cols 属性为什么在不同字体下宽度不一致
cols 的本质是“基于等宽字体的字符数估算”，不是像素值。浏览器默认用 monospace（如 Courier New）计算 cols="50" 的宽度，但一旦你设了 font-family: "Segoe UI", sans-serif，每个字符实际占位变小或变大，cols 就完全失效——它不会动态适配当前字体的 ch 宽度，也不读取 font-metrics。
常见现象：同一 cols="40"，在 Windows Chrome 下显示约 380px，在 macOS Safari 下只剩 320px；中文场景更明显，cols="30" 在微软雅黑下可能只容得下 22 个汉字。
用 CSS 的 ch 单位替代 cols（但要注意兼容性）
ch 是当前字体中 “0” 字符的宽度，比 cols 更贴近真实排版需求，但它不是万能解法：
- 非等宽字体下，
ch和实际中文/英文字符平均宽度仍有 ±15% 偏差 - Safari 对非
monospace字体的ch计算不准，尤其在 zoom ≠ 100% 时 - 必须确保
font-family已生效，否则ch按 fallback 字体计算
实操建议：
<textarea style="width: 40ch; font-family: 'Segoe UI', system-ui;"></textarea>
如果项目支持现代浏览器，可加 fallback：
<textarea style="width: 320px; width: 40ch;"></textarea>
真正可靠的方案：用 min-width + box-sizing 控制视觉宽度
放弃用字符数表达宽度，改用设计稿中确定的像素值或响应式单位，同时规避边框和内边距干扰：
- 显式设置
box-sizing: border-box，让width包含 padding 和 border - 用
min-width防止窄屏下被压缩，配合max-width防止超宽 - 避免同时写
cols和width，CSS 会覆盖 HTML 属性，但保留cols可作为无样式 JS 环境下的降级 fallback
推荐写法：
<textarea cols="40" style="width: 100%; min-width: 300px; max-width: 600px; box-sizing: border-box; padding: 0.75rem;"></textarea>
移动端特别注意：Safari 会忽略 cols，别依赖它做布局
iOS Safari 从 iOS 15 起基本不解析 cols 属性用于宽度计算，只保留语义作用（比如表单提交时辅助读取预期宽度）。这意味着：
- 写了
cols="100"在 iPhone 上几乎没效果 - 响应式断点中若靠
cols切换尺寸，必然失败 - 必须用媒体查询 +
width或ch重写
简单验证方式：在 Safari 开发者工具中删掉所有 CSS，看 textarea 是否还保持设定宽度——如果缩成一条细线，说明 cols 已被无视。
真正跨平台一致的宽度控制，从来不在 cols 里，而在你写的那行 width 和 box-sizing 里。字体变了，ch 可能漂，像素值不会骗人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
