H5页面移动端适配问题小计-1

在开发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浏览器底部遮挡问题 */
  }
}
在HTML中，给需要调整的元素添加相应的类名：
<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;
}
在JavaScript中，可以通过检测用户代理字符串来判断是否为iOS设备，并动态添加相应的类名。
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);
  };
}, []);
在HTML中，设置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); 
}

总结

通过上述方法，可以有效解决H5页面在iOS Safari浏览器中被底部工具栏遮挡的问题。开发者可以根据具体需求选择适合的方案，提升用户体验。如果遇到其他问题，欢迎在评论区补充，共同探讨解决方案。
posted @ 2025-01-09 21:57  Yang9710  阅读(380)  评论(0)    收藏  举报