5***@qq.com
5***@qq.com
  • 发布:2020-10-13 16:18
  • 更新:2020-11-27 19:52
  • 阅读:1269

【报Bug】Ios下在unaipp页面通过plus的API plus.webview.create创建webview,webview设置为全屏,但是webview加载的URL页面不是全屏,底部有留白

分类:HTML5+

产品分类: HTML5+

HBuilderX版本号: 2.8.13

手机系统: iOS

手机系统版本号: iOS 12.4

手机厂商: 苹果

手机机型: iphone 5s

打包方式: 云端

示例代码:

this.wv = plus.webview.create“hybrid/html/login.html”, 'webview-template-no-header', {
top: '0px', //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
bottom: '0px',
scalable: true,
backButtonAutoControl: "close"
}, this.extras || {});
let currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象

            currentWebview.append(this.wv); 

操作步骤:

创建一个uniapp页面
this.wv = plus.webview.create“hybrid/html/pages/login/login.html”, 'webview-template-no-header', {
top: '0px', //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
bottom: '0px',
scalable: true,
backButtonAutoControl: "close"
}, this.extras || {});
let currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象

            currentWebview.append(this.wv);   

login.html是一个简单的登录页面,它的外层容器的样式如下
.bg-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
bottom: 0;
overflow-y: auto;
background: url(../../images/login/bg_login.png);
background-size: 100% 100%;
}
在IOS里打开这个uniapp页面

预期结果:

手机全屏显示login.html页面的内容

实际结果:

手机未能全屏显示login.html页面的内容,底部有留白

bug描述:

在一个uniapp页面通过如下代码创建一个铺满全屏的webview
this.wv = plus.webview.create“hybrid/html/login.html”, 'webview-template-no-header', {
top: '0px', //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
bottom: '0px',
scalable: true,
backButtonAutoControl: "close"
}, this.extras || {});
let currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象

            currentWebview.append(this.wv);   

期望效果login.html页面占满整个页面,但实际是在IOS里打开这个uniapp页面后,底部有留白,我弄了一个简单的能复现问题的demo,可直接下载附件中的unidemo运行查看问题

2020-10-13 16:18 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

设置样式:

body{  
height:100vh;  
}
  • 5***@qq.com (作者)

    可以了,但是为啥需要这要设置呢,我之前试了html和body的height设置为100%也是不行的

    2020-11-30 11:02

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