在开发H5页面时，iOS Safari浏览器常常会遇到页面内容被底部工具栏遮挡的问题。这不仅影响用户体验，还可能导致一些功能无法正常使用。最典型的就是safari将底部的工具栏也认为是视窗的一部分，所以会出现底部被遮挡的情况：
1. 使用CSS调整页面高度
1.1 通过CSS媒体查询调整高度
可以通过CSS媒体查询来检测设备屏幕宽度，为iOS设备设置特定的样式。例如，当屏幕宽度小于767px时，为页面底部添加额外的padding，以避免被底部工具栏遮挡。@media screen and (max-width: 767px) {
.safari_only {
padding-bottom: 120px; /* 解决Safari浏览器底部遮挡问题 */
}
}<div class="safari_only">
<!-- 页面内容 -->
</div>1.2 使用计算属性调整高度
另一种方法是使用CSS的calc函数，通过计算属性减去底部工具栏的高度，来调整页面的高度。
.QYZXIOS {
background: rgba(40, 44, 52, 0.6);
z-index: 999;
height: calc(100vh - 75px); /* 使用计算属性减去底部工具栏的高度 */
width: 100%;
padding: 10% 7%;
position: fixed;
top: 0;
left: 0;
}data() {
return {
isClass: '',
};
},
created() {
this.isAndroidOrIOS();
},
methods: {
isAndroidOrIOS() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // Android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS终端
if (isAndroid) {
this.isClass = "android";
console.log("android>>>>");
return this.isClass;
}
if (isiOS) {
console.log("ios>>>>");
this.isClass = "ios";
return this.isClass;
}
return false;
}
}2. 使用JavaScript动态调整高度
2.1 监听窗口大小变化
可以通过监听页面的resize事件，动态调整页面的高度。
const ref = useRef<HTMLDivElement>(null);
const resize = () => {
if (ref.current) {
ref.current.style.height = `${window.innerHeight}px`;
}
};
useEffect(() => {
resize();
window.addEventListener('resize', resize);
return () => {
window.removeEventListener('resize', resize);
};
}, []);ref：
<div className="root" ref={ref}>
<!-- 页面内容 -->
</div>2.2 使用-webkit-fill-available
另一种方法是使用CSS属性-webkit-fill-available，该属性可以自动填满剩余的空间
html {
height: -webkit-fill-available;
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}3. 兼容iPhone X及更高版本的安全区（推荐，代码改动小）
对于iPhone X及其更高版本，需要适配安全区，以确保页面内容不会被刘海和底部栏遮挡。3.1 设置viewport-fit=cover
在<head>中添加以下meta标签，使得页面内容完全覆盖整个窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">3.2 限定页面主体内容在安全区域内
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}3.3 fixed元素的适配
/* 原吸底元素增加以下样式 */
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
/* 加一个空的颜色块 */
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background: hsla(0, 0%, 100%, 0.9);
}