进入带video 页面
点击 全屏 再退出全屏
视窗的高度包括了底部导航栏的高度
7***@qq.com
- 发布：2021-09-10 13:59
- 更新：2021-09-15 16:11
- 阅读：489
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.6
手机系统： Android
手机系统版本号： Android 9.0
手机厂商： vivo
手机机型： X27
页面类型： vue
打包方式： 离线
项目创建方式： HBuilderX
操作步骤：
预期结果：
视窗的高度不发生变化
视窗的高度不发生变化
实际结果：
视窗的高度发生变化
视窗的高度发生变化
bug描述：
安卓 video 全屏之前视窗高度正常，进入全屏再退出后，uniapp整个视窗的高度包括了安卓虚拟导航栏。导致虚拟导航栏遮挡了页面下方的内容]
https://github.com/dcloudio/uni-app/issues/2882
7***@qq.com (作者)
s-popup 是个fixed 元素 定位到页面底部； 你只需要在带video的底部写个fixed元素，就能复现这个问题（底部导航覆盖住了底部的元素）。
<template>
<div class="app" catchtouchmove="true" >
<video v-if="Url" id="video" :autoplay="true" :src="Url" :direction="0">
</video>
<s-popup :maskEnable="false" v-if="Url"/>
</div>
</template>
<script lang="ts" src="./main.ts">
</script>
<style lang="less">
.app {
height: 100vh;
width: 100vw;
overflow: hidden;
position: relative;
background-position: center top;
background-size: cover;
&::after{
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: inherit;
filter: blur(20px) brightness(0.9);
transform: scale(1.2);
z-index: -1;
}
video{
z-index: 11;
width: 100%;
height: calc(100vh - 298rpx);
padding-bottom: 0;
}
}
</style> 
7***@qq.com (作者)
你只需要在带video的底部写个fixed元素，就能复现这个问题（底部导航覆盖住了底部的元素）
2021-09-15 16:09