文章目录

在移动APP开发中,发现一个很严重的问题,就是在部分android2.3或其他一些机型上input输入框跳动,甚至跳出屏幕影响整个界面的布局。实际上正常情况下应该是当输入框获得焦点后会自动上滚视图。

原因有几个
1,输入框以及输入框父节点是否使用的 overflow:hidden 的CSS属性。这个属性会造成输入框获得焦点后不会自动上滚。
解决办法: 去除该属性,取出后可以使用别的方法在实现同样的效果,但是有的时候必须使用该属性,比如不然某个块超出指定的大小。非要使用这个属性,你必须让webkit知道当前视图的高度,这样才能让引擎处理自动上滑效果。
例如:

1
document.body.style.minHeight = window.innerHeight

但是这个方法也会有很多别的问题,比如横竖屏切换。而且webview加载界面的时候在load之前,innerHeight会一直变化,这个高度还和viewport适配有关,所以不好控制。

2、使用了transform 变形效果CSS,translate 位移后输入框会有很多问题,有输入框的区域不建议使用。可以使用绝对定位或margin来代替

3、position:fixed 属性,这个属性在某些低版本移动设备上支持不好,有很多BUG。在fixed的区域最好不要使用输入框,甚至任何交互控件。

此文是本站原创,转载请标注作者和链接出处!