在计算机上,很容易调整文本区域的大小,如:

<textarea>

http://jsfiddle.net/sssdpepa/
只需单击并拖动右下角的内容。但在移动设备上,我似乎无法调整同一文本区域的大小。我有什么东西不见了吗?或者我是否必须以某种方式单独添加移动大小调整功能?

最佳答案

大多数移动浏览器不支持cssresize属性,这正是赋予您可调整大小的文本区域的原因。
查看哪些浏览器支持调整大小:
http://caniuse.com/#search=resize
没有简单的方法来“添加移动大小调整”。我想你还是可以用一种下流的方式来做,但强烈建议不要这样做。逻辑可能是这样的:
设置resize:none
使用html+css+an img(svg)在右下角创建一个调整大小的小选项卡。
使用JS在“调整大小”选项卡上侦听拖动事件(可能需要自定义触摸事件库)。
侦听器逻辑:
如果向下拖动,则通过拖动Y距离增加元素的高度,但不要超过CSS/样式的最大高度。
如果向上拖动,则通过拖动Y距离减小元素的高度,但不要减小到CSS/Style最小高度之外。
同样,如果向右拖动,则增加宽度,但不要超过设置的最大宽度。
同样,如果拖动到左侧,则减小宽度,但不要减小到设置的最小宽度之外。
如果父元素是固定的宽度/高度,则不要让用户超出父维度的大小。
如果父元素是自动宽度/高度,则当元素的尺寸更改超出父元素的边缘时,可能需要相应地调整滚动位置。(您可能还需要执行一些字段测试,以观察更改父元素的ScrollTop/ScrollLeft是否会导致拖动检测出错)。
总之,我想说在移动设备上实现是不值得的。考虑到有限的屏幕不动产,不允许在移动设备上调整大小也可能很好。对于IE/EDGE浏览器,等待CSS模块规范最终确定,MS可能会实现它。

10-08 06:31
查看更多