如何在移动设备上调整灵活的文本区域的大小？

Question

在计算机上，可以很容易地调整文本区域的大小，如下所示：

<textarea>

http://jsfiddle.net/sssdpepa/

你只需点击并拖动右下角的东西即可。但在移动设备上，我似乎无法调整相同的文本区域的大小。我是不是漏掉了什么？或者我必须以某种方式单独添加移动大小调整功能？

Answer 1

大多数移动浏览器都不支持CSS的resize属性--正是这个属性为你提供了可调整大小的文本区域。

查看哪些浏览器支持调整大小：http://caniuse.com/#search=resize

没有简单的方法来“添加移动调整大小”。我猜你仍然可以用一种老套的方式来做这件事，但强烈不推荐这样做。逻辑可能是这样的：

在bottom-right.

• Use JS上设置resize:none.

• Use HTML + CSS + an img (SVG)以创建一个小的调整大小选项卡，以便在调整大小选项卡上监听拖动事件(您可能需要一个自定义触摸事件库)。

• Listener的逻辑是:如果向下拖动，
• 会通过拖动y距离增加元素的高度，但如果向上拖动，则不会通过拖动y距离增加元素的CSS / max-height.
• Decrease高度。但是不要减少超过CSS /样式min-height.
• Similarly，增加宽度如果拖动是向右，但不要增加超过设置max-width.
• Similarly，减少宽度如果拖动是向左，但不要减少超过设置的min-width.
• If父元素是固定的宽度/高度，不要让用户调整超过父dimensions.
• If的父元素是自动宽度/高度，你可能不得不相应地调整滚动位置，如果元素的尺寸变化超过了父元素的边缘。(您可能还需要执行一些现场测试，以观察更改父元素的scrollTop/scrollLeft是否会破坏您的drag detection).

​

总而言之，我想说在移动设备上实现它是不值得的。考虑到有限的屏幕空间，不允许在移动设备上调整大小也可能是件好事。至于IE/Edge浏览器，请等待CSS模块规范最终确定，微软可能会实现它。

Answer 2

我不认为它可以变得更小，在CSS中修改行/列不会改变它的外观。你可以将其放大(使用上述属性)，并将其设置为依赖于屏幕大小。请参见：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

你可以对文本区使用调整大小的属性，它在除IE之外的所有浏览器中都工作得很好。为了兼容所有的浏览器，你可以使用下面的Jquery UI插件来实现同样的效果。

http://jqueryui.com/resizable/