俺铁牛
俺铁牛
  • 发布:2021-01-25 15:32
  • 更新:2021-01-27 09:01
  • 阅读:896

使用nvue打开的web-view在安卓上全屏显示,在iOS上状态栏会有个留白。

分类:nvue

使用nvue打开的web-view在安卓上全屏显示,在iOS上状态栏一直会有个留白。同学们有类似的解决方法吗?

iOS
Android

<template>  
    <div>  
        <web-view class="webview" @onPostMessage="htmlMessage" :webview-styles="webviewStyles" :src="url"></web-view>  
    </div>  
</template>  

<script>  
    export default {  
        data: {  

            webviewStyles: {  
                progress: {  
                    color: '#07C160'  
                }  
            },  
            url: 'http://h5.bmssino.com/pay'  
        },  
        onLoad() {  

        },  
        onShow() {  

        },  
        computed: {  

        },  
        methods: {  
            // 网页向应用实时  
            htmlMessage(e) {  
                console.log(e)  
            },  
        }  
    }  
</script>  

<style scoped>  
    .wrapper {  
        position: fixed;  
        top: 0px;  
        left: 0px;  
        right: 0px;  
        bottom: 0px;  
    }  
    .webview {  
        position: fixed;  
        top: 0px;  
        left: 0px;  
        right: 0px;  
        bottom: 0px;  
    }  
</style>
2021-01-25 15:32 负责人:无 分享
已邀请:
俺铁牛

俺铁牛 (作者) - 这个人很懒,什么都没留下。

iOS11以上系统当启用沉浸式式状态栏后,webview默认会调整内容至安全区域之内,视觉效果如下图:
如果不需要自动调整可以在HTML中的head里meta(name="viewport")节点的content属性值中添加viewport-fit=cover

<head>  
  <meta charset="utf-8" />  
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">  
</head>

该问题目前已经被锁定, 无法添加新回复