美文网首页
ios下弹出软键盘后header会随着页面的滚动而消失在顶部

ios下弹出软键盘后header会随着页面的滚动而消失在顶部

作者: 徐徐xue | 来源:发表于2018-01-07 21:17 被阅读0次

    首先说一下为什么会出现这个情况,那是因为ios弹出软键盘的时候,webview的高度没有变化导致超出屏幕范围,而plus这时候又会自动把header的 position:fixed 属性设置为 position:relative,header就跟着滚动了。。。。

    解决办法很简单,只要是现在最新版本的plus,都有这个

        plus.webview.currentWebview().setStyle({
            softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度
        });
    

    只要你在plusready里面写入这个,就可以解决header跟着滚动的问题

    ==============问题结束分割线===============

    虽然楼主可能没遇到,不过也再顺便补充一个:如果页面中包含header、mui-content、footer,当mui-content内容很多,已经可以滚动,这时候弹出键盘,又会出现header可以滚动的情况

    这时候已经不是plus的问题了,而是css的问题(ios的坑),而是webview已经改变高度了,但是html、body的高度没有改变。

    解决办法就是写一段css样式:

        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }
    

    只要写了这段样式,页面就会随着webview的改变而改变

    相关文章

      网友评论

          本文标题:ios下弹出软键盘后header会随着页面的滚动而消失在顶部

          本文链接:https://www.haomeiwen.com/subject/rjimnxtx.html