<template>
<view class="container">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: "Hello",
trackState: {
triggerType: 'click',
title: '首页',
currentUrl: '/pages/index/index',
behavior: '点击设置按钮'
}
};
},
onLoad() {
},
};
</script>
<style lang="scss" scoped>
.container {
background-color: coral;
height: calc(100vh - var(--window-top));
// height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
JieWang
- 发布：2022-08-08 21:09
- 更新：2022-08-25 14:49
- 阅读：2285
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS 12.3 (21E230)
HBuilderX类型： 正式
HBuilderX版本号： 3.5.3
手机系统： iOS
手机系统版本号： iOS 13.0
手机厂商： 模拟器
手机机型： Phone11
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
<template>
<view class="container">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: "Hello",
trackState: {
triggerType: 'click',
title: '首页',
currentUrl: '/pages/index/index',
behavior: '点击设置按钮'
}
};
},
onLoad() {
},
};
</script>
<style lang="scss" scoped>
.container {
background-color: coral;
height: calc(100vh - var(--window-top));
// height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
<template>
<view class="container">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: "Hello",
trackState: {
triggerType: 'click',
title: '首页',
currentUrl: '/pages/index/index',
behavior: '点击设置按钮'
}
};
},
onLoad() {
},
};
</script>
<style lang="scss" scoped>
.container {
background-color: coral;
height: calc(100vh - var(--window-top));
// height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
预期结果：
预期结果是通过设置：height: calc(100vh - var(--window-top));应该在IPhone11设备上在安全区域内展示；
预期结果是通过设置：height: calc(100vh - var(--window-top));应该在IPhone11设备上在安全区域内展示；
实际结果：
实际结果是超出了安全区域下边界限；
实际结果是超出了安全区域下边界限；
bug描述：
var(--window-top)，在H5上（chrome浏览器模拟移动设备时），（通过鼠标查看可知，不方便截图）计算结果为calc(44px + env(safe-area-inset-bottom))，即height: calc(100vh - var(--window-top) );，计算出的结果应是：height: calc(100vh - 44px - env(safe-area-inset-bottom));，即在IPhone11上应该是在安全区域里展示，但实际结果不是；
var(--window-bottom)，可能也存在表现不一致的问题，该变量目前没有验证；
var(--window-top)，在小程序开发者工具中的表现与IPhone11的表现一致，需要再减去env(safe-area-inset-bottom)的值；
最佳回复
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
app，直接获取 屏幕高度-导航栏-底部安全区域
--window-top 是内容去距离顶部的距离，IOS 想要在安全区内绘制页面，设置高度应再减去底部安全区高度
测试
height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom))三端（h5，ios，微信小程序）都会绘制在安全区内
height: calc(100vh - var(--window-top))三端都会满屏
-
JieWang (作者)
但是var(--window-top)，计算方式不应该统一吗？我在问题里也说了，var(--window-top)在chorme浏览器模拟移动端时，计算出来的值为calc(44px +env(safe-area-inset-bottom) )，按照这个值，height: calc(100vh - var(--window-top))就应该绘制在安全区内，但事实上不是
2022-08-09 15:57
-
JieWang (作者)
我新添了一个附件图片，你可以直接看一下var(--window-top)计算出来的值，个人理解--window-top：是内容去距离顶部的距离，正确值应该是 calc(44px +env(--status-bar-height) )吧，不知是计算错误，还是在H5、IOS-APP上表现不一致；
2022-08-09 16:14
-
