uni-app的webview无法全屏显示

uni-app的webview无法全屏显示

开发环境 版本号 项目创建方式
Windows win7 专业版 HBuilderX
HBuilderX 3.1.6
Chrome 86.0.4240.198

示例代码：

<template>  
    <view>  
        <web-view :src="uri"  allow="fullscreen"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                uri:''  
            }  
        },  
        onLoad(src) {  
            this.uri=src.src;  
        },  
        methods: {  

        }  
    }  
</script>

操作步骤：

<template>  
    <view>  
        <web-view :src="uri"  allow="fullscreen"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                uri:''  
            }  
        },  
        onLoad(src) {  
            this.uri=src.src;  
        },  
        methods: {  

        }  
    }  
</script>

预期结果：

<template>  
    <view>  
        <web-view :src="uri"  allow="fullscreen"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                uri:''  
            }  
        },  
        onLoad(src) {  
            this.uri=src.src;  
        },  
        methods: {  

        }  
    }  
</script>

实际结果：

<template>  
    <view>  
        <web-view :src="uri"  allow="fullscreen"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                uri:''  
            }  
        },  
        onLoad(src) {  
            this.uri=src.src;  
        },  
        methods: {  

        }  
    }  
</script>

bug描述：

uni-app的webview打开文件地址，在HBuilderX编辑器中可全屏，但是在Chrome浏览器中只有部分区域显示，不能全屏


更多关于uni-app的webview无法全屏显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

同问，楼主解决了吗？

更多关于uni-app的webview无法全屏显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，<web-view>组件默认会铺满其父容器，但全屏显示问题通常与页面结构和样式相关。从你的代码看，<web-view>被包裹在<view>中，如果父容器<view>没有设置全屏样式，可能导致在Chrome中显示区域受限。

检查以下几点：

  1. 父容器样式：确保外层<view>设置了width: 100%; height: 100vh;，以占满整个视口。
  2. 页面级样式：确认页面根元素没有内边距或外边距影响布局。
  3. Chrome兼容性：Chrome对某些CSS属性（如height: 100%）可能严格依赖父级高度定义。使用height: 100vh更可靠。
  4. allow属性：allow="fullscreen"仅控制Web内容的全屏API权限，不影响组件本身布局。

建议调整代码：

<template>
    <view class="container">
        <web-view :src="uri" allow="fullscreen"></web-view>
    </view>
</template>

<style>
.container {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
}
</style>
回到顶部