微信下输入法在IOS和安卓下的诡异

1.window.innerHeight

系统版本 iOS9.1.1 安卓4.4.4
没有输入法的情况下 504 567
有输入法的情况下 208 273

 


两者的window.innerHeight都不包括输入法的那部分,元素的定位都是相对输入法上面区域来定位的,也就是window.innerHeight来定位的。

2.window.outerHeight

系统版本 iOS9.1.1 安卓4.4.4
没有输入法的情况下 0 1134
有输入法的情况下 0 545

IOS不支持outerHeight属性,郁闷!

3.(document.documentElement||document.body).clientHeight

系统版本 iOS9.1.1 安卓4.4.4
没有输入法的情况下 504 567
有输入法的情况下 504 273

看来两者的又有差异,IOS下clientHeight包括输入法部分,安卓的clientHeight不包括下面输入法部分。

4.验证元素的高度变化

例如:$('#id').css("height");  //节点的文档高度,绝对定位,按照bottom来确定位置的。

系统版本 iOS9.1.1 安卓4.4.4
没有输入法的情况下 353px 408px
有输入法的情况下 353px 114px

可以见得:有无输入框法,ios下元素的文档高度没有变化,安卓是相当输入法来变化的,这个就需要作为判断了。

下面再验证上面元素内部元素的高度变化趋势(内部元素高度是动态变化的)$('#innerid').css("height");

iOS9.1.1:     311px----663px----929px---1195px;

安卓4.4.4:   357px---573px----870px---1192px;

可以见得:再没有输入框的情况,安卓和IOS元素的定位变化的趋势是OK的。

5.导致的问题

在IOS下,当输入法推上去的时候,页面的内容也回推上去,内容只有window.innerHeight高度的内容了,又由于clientHeight没有变化,而输入框就占领了一部分。

同时页面元素的高度没有变化,导致元素的滚动条展开不了,必然下面的内容部分看不到了,失去的内容的高度就是输入法的高度。解决之道:

第一步:$('#id').css("height",window.innerHeight);                                                         //把最下面元素的高度设置为window.innerHeight

第二步:下面的内容消失,所以要用元素的top定位。

     var inputHeight = (document.documentElement||document.body).clientHeight-window.innerHeight;  //输入法的高度 

     $('#id').css('top',inputHeight); // 最下面的元素的top设置为输入法高度

动作对UI的渲染太大,用setTimeout来延迟执行,目前搞到的就是这些,有什么牛B的好办法就好了。

原文地址:https://www.cnblogs.com/liuyinlei/p/4934452.html