uni-app nvue webview flex1铺满手机屏幕不生效 ios底部一片白屏

uni-app nvue webview flex1铺满手机屏幕不生效 ios底部一片白屏

开发环境 版本号 项目创建方式
Windows 6AA30D0B-46C5-43C6-A317-E0E9FA17F526 HBuilderX
4.85

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：iOS

手机系统版本号：iOS 16

手机厂商：苹果

手机机型：iphone 12pro max

页面类型：nvue

vue版本：vue3

打包方式：云端

示例代码：

<template>  
    <view class="webview-container">  
        <web-view ref="webview" class="webview" :src="webPath"></web-view>  
    </view>  
</template>  
<style lang="scss" scoped>  
    .webview-container {  
        flex: 1;  
        background-color: red;  

        .webview {  
            flex: 1;  
        }  
    }  
</style>

操作步骤：

<template>  
    <view class="webview-container">  
        <web-view ref="webview" class="webview" :src="webPath"></web-view>  
    </view>  
</template>  
<style lang="scss" scoped>  
    .webview-container {  
        flex: 1;  
        background-color: red;  

        .webview {  
            flex: 1;  
        }  
    }  
</style>

预期结果：

铺满ios屏幕

实际结果：

底部一片白屏

bug描述：

nvue webview flex:1铺满手机屏幕不生效，ios底部一片白屏，官方文档自己标注使用flex:1 就能铺满


更多关于uni-app nvue webview flex1铺满手机屏幕不生效 ios底部一片白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好 我本地测试是可以铺满的 <template>
<view class="webview-container">
<web-view ref="webview" class="webview" src="https://www.baidu.com"></web-view>
</view>
</template>

<style lang="scss" scoped> .webview-container { flex: 1; background-color: red; .webview { flex: 1; } } </style>

更多关于uni-app nvue webview flex1铺满手机屏幕不生效 ios底部一片白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中，iOS设备上web-view组件使用flex:1布局时出现底部白屏是常见问题。这是由于iOS安全区域适配导致的。

解决方案如下：

  1. 使用安全区域适配样式：
.webview-container {
  flex: 1;
  background-color: red;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  1. 或者使用页面级的安全区域配置： 在pages.json中对应页面配置：
{
  "style": {
    "safeArea": {
      "bottom": {
        "offset": "auto"
      }
    }
  }
}
  1. 检查页面结构，确保父容器也是flex布局：
<template>
  <view class="container">
    <view class="webview-container">
      <web-view ref="webview" class="webview" :src="webPath"></web-view>
    </view>
  </view>
</template>

<style scoped>
.container {
  flex: 1;
}
.webview-container {
  flex: 1;
}
.webview {
  flex: 1;
}
</style>
回到顶部