HTML文本框resize grabber在手机浏览器无法使用的问题求助

• 先检查是否有其他CSS规则覆盖了resize属性
  打开浏览器开发者工具（切换到手机模拟模式），查看textarea的计算样式（computed），确认resize是否真的被设为both。有可能是优先级更高的选择器（比如id选择器、内联样式）把resize设成了none，或者父元素的样式间接影响了它。

• 排查触摸事件是否被阻止
  检查textarea或其父元素有没有设置pointer-events: none;，或者touch-action: none;——这两个属性会阻止触摸交互，导致resize手柄拖不动。可以给textarea加个样式试试：

  #textBox {
    touch-action: manipulation;
  }
  

• 检查textarea的尺寸限制
  如果给textarea设了max-height、max-width、min-height、min-width，可能会让用户误以为resize失效（比如拖到最大值就不能再放大）。可以调整这些属性，比如设置合理的范围：

  #textBox {
    min-height: 80px;
    max-height: 300px;
    min-width: 100%;
    max-width: 100%;
  }
  

• 针对移动端浏览器做特殊适配
  部分移动端浏览器（比如iOS Safari）对resize的支持有细节差异，可以试试补充这些样式：

  #textBox {
    resize: both;
    overflow: auto; /* 确保不是hidden */
    -webkit-appearance: none; /* 去掉浏览器默认样式干扰 */
  }
  

• 用极简代码排查干扰
  先写一段不带任何自定义class的测试代码，在手机浏览器里验证是否能正常resize：

  <textarea name="test" placeholder="Test resize..." id="testTextarea"></textarea>
  

  #testTextarea {
    resize: both;
    width: 100%;
    min-height: 100px;
  }
  

  如果这段代码能正常工作，再逐步加回原来的class和样式，就能定位到是哪个样式导致的问题。

内容的提问来源于stack exchange，提问作者Electric Trojan