豆腐果lyl
豆腐果lyl
  • 发布:2015-09-01 15:48
  • 更新:2015-10-30 10:57
  • 阅读:6711

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

分类:HTML5+

就拿MUI 官方例子来说

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

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

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

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

2015-09-01 15:48 分享
已邀请:
半杯可乐

半杯可乐 - 努力奋斗中。

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

  • 豆腐果lyl (作者)

    请问就是mui例子里面的父子模板模式么??

    2015-09-01 17:14

  • 半杯可乐

    你截图的这个页面是单页面。

    2015-09-01 17:28

闪闪

闪闪

fixed定位在ios上不太支持

Wudy

Wudy

已解决。

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

DCloud_UNI_FXY

问题1:

header跑到顶部,是为了解决问题2(fixed元素跑到中间)

问题2:

textarea弹起键盘导致header跑到中间的问题,下个版本修复。

  • JSail

    多少年了,还是没解决的问题

    2018-03-26 23:07

  • 321802282@qq.com

    header 还是乱跑

    2019-05-21 11:12

要回复问题请先登录注册