最标准做法是直接对 textarea 设置 resize: none;，右下角拖拽手柄消失；需确保样式作用于 textarea 本身而非父容器，避免被第三方样式覆盖，建议配合宽高约束和 overflow 控制布局稳定。
直接给 textarea 元素设置 resize: none; 就能禁止用户手动缩放，右下角拖拽手柄会消失，这是最标准、最通用的做法。
基础写法：确保样式作用到真实元素上
必须把样式写在 textarea 标签本身，而不是它的父容器。常见错误是 UI 框架（如 Ant Design、Element Plus）把 textarea 包在 div 里，你写的规则却只针对类名，结果根本没生效。
- 推荐写法：
textarea { resize: none; }或更精准的textarea.form-input { resize: none; } - 临时验证可用内联样式：
<textarea style="resize: none;"></textarea>，它优先级最高，不易被覆盖 - 如果被第三方样式（比如 Bootstrap 的
textarea { resize: vertical !important; }）覆盖，可加!important强制生效：resize: none !important;
检查是否真正生效
别只看代码写了没，要确认浏览器最终计算出的值确实是 none。
- 打开开发者工具（F12），选中目标
textarea，切换到「Computed」面板 - 搜索
resize，查看右侧显示的值是不是none - 如果不是，说明有更高优先级的规则在起作用，需要调整选择器或加
!important
配合尺寸锁定更稳妥
仅禁用缩放还不够——用户可能通过其他方式（比如复制粘贴大量内容）撑开区域，影响布局。建议搭配尺寸约束：
- 固定宽高：
width: 300px; height: 120px; - 或限制范围：
min-width: 280px; max-width: 400px; min-height: 100px; max-height: 200px; - 加上
overflow: auto;或hidden，避免内容溢出破坏结构
移动端 Safari 的特殊情况
iOS Safari 默认不显示右下角手柄，但部分版本（尤其是 iOS 16+）支持长按后拖动触发系统级缩放，这种行为无法用 CSS 阻止。
- 这不是 bug，是系统级交互，
resize属性对此无效 - 若业务强依赖尺寸稳定（如表单校验、网格对齐），需在 JS 层监听输入并主动重置高度，或结合
user-scalable=no等 meta 控制整体页面缩放 - 注意：禁用页面缩放会影响可访问性，慎用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
