webapp前端开发软键盘与position:fixed为咱们带来的不便

前提：咱们考虑兼容的环境为android和ios两种智能手机

兼容环境测试结果显示android的表现明显好于ios，ios手机在软键盘呼起收起时存在着很严重的兼容性问题

场景展现：

页面正常状态

软键盘弹出时，悬挂元素丢失了指定位置

软键盘未经过点击完成而失去焦点时，页面渲染发生崩溃性错乱，手指滑动后页面会恢复正常

 

咱们再来看市面上比较强势的webapp网站表现

场景展现：

淘宝等阿里旗下webapp网站均选择回避在页面上展现悬挂元素，或者在有悬挂元素时避免产生软键盘弹出事件

百度帖子回复采用了页面转场模式，即在当前页面渲染一个与本页面无冲突的新页面，这的确是一个很出色的办法，可是目前咱们尚未在页面转场方面的研究和探索

百度贴吧搜索采用了设置固定的滚动区域，可是触屏滑动动做在页面滚动和区域滚动之间的体验不好

 

如今咱们来看webapp前端开发中，软键盘基本工做原理

输入框聚焦时，软键盘弹出；如输入框在可视界面底部，软键盘弹出将遮挡它时，整个可视界面模块会被软键盘自动推上去，从而保持聚焦的输入框在咱们可视范围

从viewport和软键盘的原理上咱们无从入手，咱们甚至没法发现软键盘弹出事件，没法获取软键盘高度，也没法经过输入框聚焦与否判断软键盘是否弹出，因而只好选择寻找合适该前提条件的兼容方法

 

市面上诞生诸如iscroll等webapp前端开发框架，在html页面上设置固定的滚动区域，并从用户感知体验上优化了触屏滑动动做在页面滚动和区域滚动之间的冲突

它的原理是经过让html页面上的滚动元素与悬挂元素分离，从而避免软键盘弹出时，对悬挂元素产生影响，外在表现是悬挂元素的工做方式再也不是试图吸附在可视界面的指定位置，所以因悬挂带来的问题也就消失了

由此能够分析出iscroll解决问题的核心思路是——模拟fixed展现效果来替代fixed

 

因而咱们最终选择在ios下使用iscroll开发框架的方案来解决该问题

可是该方案并不是就没有自身的问题，若是页面上输入框元素在页面最底部，软键盘唤起时将产生输入框间歇性对焦不工做的问题，致使聚焦元素被唤起的软键盘遮挡

该问题致使用户输入文本内容时的体验将会很是差

场景展现：

软键盘弹出正常时

软键盘弹出间歇性不正常时

 

在咱们现有技术认知水平状况下，采起的方案是被动妥协的，咱们的建议是在产品设计原型上，尽可能回避输入框元素出如今页面最底部的场景

iscroll.min.js下载

 

还有部分android手机机型、版本、浏览器也不支持position:fixed属性

经过userAgent取得该手机的部分特性，而后与ios一样处理，后遗症是通常这样的手机比较落后，iscroll开发框架带来的渲染会形成页面滑动时很卡，甚至是抽搐状态

userAgent代码输出示例：

document.write(navigator.userAgent);

 

现在手机端开发的前景上，webapp正在飞速扩张，和naturalapp呈现出并驾齐驱的态势；webapp有着自身不可替代的优点，也有着不少难以克服的弱点，也一样须要webview的努力与支持