IOS下弹出键盘后，webview高度没有变化，显示区域缩小，导致header会出现错位

分类：HTML5+

HTML5+ 弹出软键盘 Webview mui

就拿MUI 官方例子来说

默认情况下屏幕高度 == webview高度

当点击一个input的时候，自动弹出键盘，屏幕高度缩小，让给了键盘，但是webview高度不变，结果就是，header会随滚动隐藏

有更严重的情况，还是input这个页面，把textarea属性rows设置为20行，这时候页面整体高度会超出屏幕范围，先滚动页面到底部，再点击textarea触发键盘，这时候header直接漂浮错位到页面中间了

安卓上没有这个问题，我看官方说安卓会自动压缩webview，看提供的文档也是安卓的，但是ios没有，这算是MUI、H5+官方的bug？有没有解决办法？？

2015-09-01 15:48 负责人:无分享

4 个回复

半杯可乐 - 努力奋斗中。

临时解决办法，双Webview方式可以解决。

fixed定位在ios上不太支持

已解决。

首先设置软键盘弹出是窗口resize
plus.webview.currentWebview().setStyle({
softinputMode: "adjustResize"
});
设置body不可滚动
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
设置header的position为fixed
设置header下面的div为可滚动，且高度为100%
<div style="height:100%;overflow: auto;">