关于iOS上css中fixed绝对定位实效 虚拟键盘的问题解决

软键盘唤起后,页面的 fixed 元素将失效。理论上 fixed 转成了 absolute 的效果。安卓机上没问题。

关于iOS上css中fixed绝对定位实效 虚拟键盘的问题解决_第1张图片

iOS上,当唤起虚拟键盘后,底部可以滑动,被虚拟键盘盖住,导致最后滑不上来,直到关闭虚拟键盘恢复。
测试提出bug。

经过,查看其他例如腾讯的qq 微信 汽车之家 等类似的功能,实现的机理大体都是,只要触发过虚拟键盘之后,再滑动,首先先隐藏虚拟键盘,再让滑动。

实现这个功能,代码其实很简单,手机端有touch事件,只要检测touch事件,关闭小键盘即可:
(这里使用jquery 或zepto的监听事件。当然你可以使用 addeventlistener。原理都是一样。)

$(window).on('touchmove',function(){
    $('#input1').blur();
});

完成!

你可能感兴趣的:(iOS)