步骤1. 随便写一个h5页面，设置页面的宽100%，高100%，放在服务器上
步骤2. 在uni-app内部，打开一个去导航栏的web-view页面，web-view的地址指向 步骤1的页面地址
步骤3.在IOS手机 苹果X上(自定义基座)运行，打开对应的web-view页面，即可复现此问题，如果一开始是好的，反复杀死app重新进入。
PowerJohn
- 发布：2022-07-20 10:26
- 更新：2022-08-05 16:03
- 阅读：2292
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.4.18
手机系统： iOS
手机系统版本号： iOS 14
手机厂商： 苹果
手机机型： 苹果X
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
希望h5能占满全屏
希望h5能占满全屏
实际结果：
底部多出一块，页面占用不到满屏
底部多出一块，页面占用不到满屏
bug描述：
web-view组件，打开服务器上的h5 webapp的时候，底部无法铺满。底部的高度大约和隐藏的导航条的高度差不多，感觉是顶部导航条的问题导致的，但是我们不想要顶部对的导航条。所以，就造成了底部出现灰色留白的问题。
附件中的图片我是在论坛中找的一个同样问题的图片，这个问题没有从uni-app层面处理好，给出的应急解决是在h5 的webapp中设置html、body的高度为100vh。
之前我们使用过h5+的方式，这种方式打开对应的h5 webapp是没问题的，所以，希望官方可以在uni-app层面能解决这个问题。
PowerJohn (作者) - i am john
已解决，一开始设置的时候，可能会出现不起作用的情况，如果这种情况出现，删除APP重新搞一个新的。
解决方案如下：
// mounted 生命周期内调用
formmatWebView() {
this.$nextTick(() => {
const currentWebview = this.$scope.$getAppWebview();
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
const wv = currentWebview.children()[0];
if (wv) {
console.log("--------调整web-view视口高度----------");
wv.setStyle({ contentAdjust: false });
console.log(wv.getStyle());
} else {
this.time = this.time - 1;
if (this.time > 0) { this.formmatWebView(); }
}
}, 100);
});
}
PowerJohn (作者)
使用的组件形式 <web-view></web-view>
2022-07-21 10:08
DCloud_UNI_WZF
组件形式可通过动态设置 style 临时处理该问题
后续会在组件层面修复
2022-07-21 11:23
PowerJohn (作者)
回复 DCloud_UNI_WZF: 好的，非常感谢
2022-07-22 09:57