<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() {
},
methods: {
},
};
</script>
<style lang="scss">
.container {
background-color: coral;
height: calc(100vh - 44px - 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>

- 发布:2022-08-08 20:25
- 更新:2022-08-09 09:13
- 阅读:733
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS 12.3 (21E230)
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
手机系统: iOS
手机系统版本号: iOS 13.0
手机厂商: 模拟器
手机机型: IPhone8IPhone11
页面类型: 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() {
},
methods: {
},
};
</script>
<style lang="scss">
.container {
background-color: coral;
height: calc(100vh - 44px - 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() {
},
methods: {
},
};
</script>
<style lang="scss">
.container {
background-color: coral;
height: calc(100vh - 44px - 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>
预期结果:
在H5与IOS APP上页面高度(样式)统一,即通过设置container样式为height: 100vh ;确保页面为一屏高度时,不会出现滚动条;
或者height: calc(100vh - 44px - env(safe-area-inset-bottom));时,在H5与IOS APP上,样式统一,保证页面为一屏高度时,不会出现滚动条;
在H5与IOS APP上页面高度(样式)统一,即通过设置container样式为height: 100vh ;确保页面为一屏高度时,不会出现滚动条;
或者height: calc(100vh - 44px - env(safe-area-inset-bottom));时,在H5与IOS APP上,样式统一,保证页面为一屏高度时,不会出现滚动条;
实际结果:
在H5与IOS APP上,样式不统一,即在IOS APP上,页面底部有44px高度的缺失,导致不能覆盖满全屏;
在H5与IOS APP上,样式不统一,即在IOS APP上,页面底部有44px高度的缺失,导致不能覆盖满全屏;
bug描述:
同样的代码:
height: calc(100vh - 44px - env(safe-area-inset-bottom));
在H5与IOS APP上页面高度(样式)不统一;

