html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
<title>ios底部小横条高度适配</title>
<style>
* {
padding: 0;
margin: 0;
background-color: pink;
}
.container {
display: flex;
justify-content: center;
align-items: center;
position: fixed !important;
width: 100vw;
height: 50px;
z-index: 100;
background-color: blue;
bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
bottom: env(safe-area-inset-bottom) !important; /*兼容 IOS >= 11.2*/
}
.bottom {
display: flex;
justify-content: center;
align-items: center;
position: fixed !important;
bottom: 0;
background-color: red;
width: 100vw;
height: constant(safe-area-inset-bottom) !important;
height: env(safe-area-inset-bottom) !important;
}
</style>
<script>
// 使用js去设置meta标签(本人在做海报项目时是直接把下面属性写到meta标签中的,但是没效果,放到这个js里面动态设置就好了,海报项目是vue3+vite)
// 在当前示例里面,注释掉下面的js也没问题,具体原因未知,如果各位设置meta没效果的话可以尝试一下这个属性
(document.getElementsByName('viewport')[0]).content =
'user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover';
</script>
</head>
<body>
<div class="container"> 我是内容区域 </div>
<div class="bottom">我是距离底部的高度模块</div>
</body>
</html>