移动端浏览器主动禁用 resize 是设计决策而非 bug，因触摸输入易误触且与系统缩放冲突；PC 端依赖鼠标可精准操作，故保留该功能。
resize 在移动端被浏览器主动禁用，不是 bug 是设计决策
所有主流移动浏览器（iOS Safari、Chrome for Android、Firefox for Android）都彻底禁用了 resize 的用户交互能力。这不是 CSS 写错了，也不是你漏了 overflow，而是浏览器内核层面移除了该事件监听和手柄渲染逻辑——哪怕你把 textarea 设置成 resize: both; overflow: auto;，在手机上拖拽也不会触发任何 resize 事件，控制手柄也根本不会显示。
为什么 PC 有效、手机无效？关键在输入模型差异
PC 端依赖鼠标+精确光标，resize 手柄有明确 hover 区域和 drag 操作空间；移动端以触摸为主，系统认为“拖拽边缘调整尺寸”既难精准又易误触，且与系统级缩放手势（双指捏合）语义冲突，所以直接屏蔽。
- iOS Safari 自 iOS 9 起就不再响应
textarea的resize事件，getComputedStyle(el).resize返回none（即使你写了both） - Android Chrome 从 v80 开始移除触摸端的 resize 手柄绘制逻辑，仅保留 PC 模拟器下的视觉反馈
- 第三方组件库（如 Element Plus）在移动端自动降级为
resize: none，但通常不暴露这一行为，容易让人误以为是样式没生效
别白费力气去“修复”，改用 touch 事件模拟才是正解
想在移动端实现分屏拖拽或尺寸调节，必须放弃 resize，改用 touchstart/touchmove/touchend 手动监听位移，并更新 flex-basis 或 width。注意几个硬性前提：
- 给拖拽区域加
touch-action: none，否则手指滑动会触发页面滚动而非拖拽 - 拖拽过程中禁用文字选中：
user-select: none+-webkit-user-drag: none - 用
requestAnimationFrame节流touchmove更新，避免高频写样式导致掉帧 - 不要在拖拽中读取
offsetWidth或getBoundingClientRect()，这会强制同步布局计算，卡顿立现
最常被忽略的兼容性陷阱：resize 不是“开关”，而是“提示”
即使在 PC 端，resize 也不是可靠事件源：它不冒泡、无法取消、部分浏览器扩展（如某些广告拦截器）会静默禁用。真正需要响应尺寸变化的逻辑（比如保存当前比例、触发布局重算），应该监听 resize 作为辅助，同时兜底用 IntersectionObserver 或 ResizeObserver 监测容器实际尺寸变化。移动端连这个“辅助”都没有，更得从底层交互逻辑重构。
