做一个类似于手机端QQ动态详情页面,该页面有一个置于页面底部的评论输入框,刚开始单纯的以为这没什么难的,使用fixed布局不就是So easy!么,在安卓上也是意料之中完美的效果,然并卵,在ios上有时输入框却被软键盘遮挡,经过在度娘上的多方查找,发现原来是ios对fixed布局有兼容问题,导致fixed布局不稳定,软键盘弹起时fixed布局可能会改为absolute布局,总之这是一个需要修复的bug,又是各种搜索之后,看到了前辈们对这种问题的各种经验,作为一个前端新手,我只能GET到一些JS的解决方法,最终解决办法如下:
// 输入框在iphone中被遮挡问题 if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { $('.comment-panel input').on('touchstart',function(e){ document.body.scrollTop = document.body.scrollHeight; }); }
但是经过测试发现当ios的采用搜狗输入法的时候,有时会有遮挡一半输入框,这个问题出现的几率很小,但仍未解决,这也算是系统的一个bug,希望有解决的前辈们看到能指点一二!