iPhoneX底部安全区域适配

phyark

已于 2023-05-30 11:26:43 修改

阅读量958

点赞数 1

分类专栏：个人记录开发文章标签：前端 css3 H5开发 iphone 适配底部安全区域 iPhoneX底部样式兼容

于 2023-03-02 11:09:00 首次发布

本文链接：https://blog.csdn.net/weixin_37746009/article/details/129295458

版权

个人记录同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

开发

7 篇文章 0 订阅

订阅专栏

问题

H5 手机底部和黑线重叠不美观

解决方法

通过viewport + constant(safe-area-inset-bottom) + env(safe-area-inset-bottom) 来为iphoneX底部的黑线做底部安全区适配

步骤 1

找到 name = viewport 的 meta 标签并追加 viewport-fit=cover

  <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

步骤 2

为需要适配安全区域的类添加以下兼容样式

.safe-area {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 以下mete标签需要加上 viewport-fit=cover -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
  <title>Document</title>
  <style>
    .nav-bar {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #f1f1f1;
      display: flex;
      justify-content: space-between;

      /* 以下顺序不能变 */
      /*兼容 IOS<11.2*/
      /* padding-bottom: constant(safe-area-inset-bottom); */
      /*兼容 IOS>11.2*/
      /* padding-bottom: env(safe-area-inset-bottom); */
    }

    .nav-bar-item {
      height: 60px;
      width: calc(100vw / 4);
      line-height: 60px;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>iphoneX底部安全区域适配</h1>
  <nav class="nav-bar">
    <span class="nav-bar-item">首页</span>
    <span class="nav-bar-item">关注</span>
    <span class="nav-bar-item">搜索</span>
    <span class="nav-bar-item">我的</span>
    <nav>
</body>

</html>