注册登录

1***@qq.com

发布：2021-12-23 14:27
更新：2021-12-27 21:17
阅读：815

【报Bug】ios nvue webview无法全屏展示，按钮的点击区域跟展示的区域不一致。

分类：uni-app

不是问题

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows10

HBuilderX类型：正式

HBuilderX版本号： 3.2.16

手机系统： iOS

手机系统版本号： iOS 15

手机厂商：苹果

手机机型： iphonese,ipadmini,iphonexs

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

{  
  "path": "pages/shu/img",  
  "style": {  
    "popGesture": "none",  
    "navigationStyle": "custom",  
    "backgroundTextStyle": "dark",  
    "navigationBarBackgroundColor": "#ffffe0"  
  }  
},

pages/shu/img为nvue页面

操作步骤：

打开页面，点击X按钮。

预期结果：

关闭当前页面退回上一个页面

实际结果：

点击无反应，往下偏移点击，直到偏移一定的距离才会响应事件关闭退回上一个页面。

bug描述：

点击X按钮无反应，点击偏下区域才能激发事件。

2021-12-23 14:27 负责人:DCloud_iOS_XHY 分享

7 个回复

1***@qq.com (作者)

页面代码显示不全，下面补充，是nvue页面。
<template>
<view style="flex: 1;">
<web-view style="flex: 1;" :webview-styles="{progress: false}" :src="imgUrl"></web-view>
<view class="head-wrapper">
<view class="head-wrapper-lf" @click="closePage()">
<text class="item-close"></text>
</view>
<view class="head-wrapper-rt">
</view>
</view>
</view>
</template>
.head-wrapper {
flex-direction: row;
align-items: center;
justify-content: space-between;
position: fixed;
height: 176rpx;
top: 0;
left: 0;
right: 0;
}
.head-wrapper-lf {
height: 176rpx;
align-items: center;
justify-content: center;
}

1***@qq.com (作者)

同时希望webview撑满整个屏幕，现在是状态栏区域无法撑满。

1***@qq.com (作者)

页面代码

<template>  
  <view style="flex: 1;">  
    <web-view style="flex: 1;" :webview-styles="{progress: false}" :src="imgUrl"></web-view>  
    <view class="head-wrapper">  
      <view class="head-wrapper-lf" @click="closePage()">  
        <text class="item-close">&#xe602;</text>  
      </view>  
      <view class="head-wrapper-rt">  
      </view>  
    </view>  
  </view>  
</template>

DCloud_UNI_Anne

IOS15，iPhone 6s Plus，未复现问题。
【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

1***@qq.com (作者)

请见最新回复，下载示例代码能重现问题。

2021-12-27 12:40

1***@qq.com (作者)

在hello-uniapp里面添加代码能重现问题。附件已上传，编译安装后，点extui，点uni-grid，点toimg，这里的webview无法全屏，点击返回按钮无响应，需要往下一定距离点击才起作用。

uni-app-hello-original.zip

DCloud_UNI_Anne

收到，这边先看下

2021-12-27 17:49
DCloud_UNI_Anne

回复 DCloud_UNI_Anne: 返回按钮区域写大一点试下

2021-12-27 18:08

DCloud_UNI_Anne

点击无反应，是必现的还是偶现的？安卓是否正常？返回按钮不要和状态栏重叠，写下方试下

1***@qq.com (作者)

跟大小没有关系，必然出现，安卓是正常的全屏，只有苹果不能全屏，并且点击无响应。

2021-12-27 21:41
DCloud_UNI_Anne

回复 1***@qq.com: 点击无反应问题未复现，多测试几个手机试下都这样吗？

2021-12-28 14:36
1***@qq.com (作者)

回复 DCloud_UNI_Anne: 你是跑的我给的示例代码吗？iphonese和iphonexs都测试过，都这样的。

2021-12-29 15:14
DCloud_UNI_Anne

回复 1***@qq.com: 是的，把你那按钮下移了一点，放大了一点，测试正常，你那按钮还和状态栏重叠怎么好点呢

2021-12-29 15:29
1***@qq.com (作者)

回复 DCloud_UNI_Anne: 关键不是按钮大小，是按钮要往下移，用top往下移动状态栏高度问题解决。

2021-12-30 12:35

DCloud_iOS_XHY

参考这篇文档解决 https://ask.dcloud.net.cn/article/35386

1***@qq.com (作者)

contentAdjust这个在vue页面是生效的，参考的是http://www.skrjs.com/index.php/2020/08/05/uni-app-%e7%9a%84-webview-%e5%9c%a8ios%e5%9c%a8%e6%97%a0%e6%b3%95%e5%85%a8%e5%b1%8f%e7%9a%84%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/

但是nvue页面就是不行。上传的示例代码可以直接运行测试。

2021-12-27 21:44
1***@qq.com (作者)

加了viewport-fit=cover"，webview顶上去了，但是下面又出现状态栏同样大小的白条。

2021-12-27 22:09

DCloud_iOS_XHY

回复 1***@qq.com: 页面下面空白的问题需要在 html 中添加样式 style="height: 100vh;"

<!DOCTYPE html>  

<html style="height: 100vh;">  

<head>  

    <meta name="viewport" content="width=device-width, initial-scale=0.38, maximum-scale=0.38, minimum-scale=0.38, user-scalable=no, viewport-fit=cover">  

    <meta name="apple-mobile-web-app-capable" content="yes" />  

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />  

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />  

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

    <title>img</title>  

</head>  

<body style="background-color: #007AFF; height: 100vh;">  

</body>  

</html>

2021-12-28 15:52

1***@qq.com (作者)

回复 DCloud_iOS_XHY: 加上html的style解决了。

2021-12-30 12:33
DCloud_iOS_XHY

回复 1***@qq.com: ok，文档中我在加个说明

2021-12-30 12:49

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

【报Bug】ios nvue webview无法全屏展示，按钮的点击区域跟展示的区域不一致。

操作步骤：

打开页面，点击X按钮。

预期结果：

关闭当前页面退回上一个页面

实际结果：

点击无反应，往下偏移点击，直到偏移一定的距离才会响应事件关闭退回上一个页面。

bug描述：

7 个回复

公告

相关问题

【报Bug】ios nvue webview无法全屏展示，按钮的点击区域跟展示的区域不一致。

操作步骤： 打开页面，点击X按钮。

预期结果： 关闭当前页面退回上一个页面

实际结果： 点击无反应，往下偏移点击，直到偏移一定的距离才会响应事件关闭退回上一个页面。

bug描述：

相关链接 ：

与内容相关的链接

7 个回复

公告

相关问题

操作步骤：

打开页面，点击X按钮。

预期结果：

关闭当前页面退回上一个页面

实际结果：

点击无反应，往下偏移点击，直到偏移一定的距离才会响应事件关闭退回上一个页面。

相关链接：