iPhoneX底部安全区域适配

phyark

2024-05-09 帮助1人

问题

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>

效果

学新通

这篇好文章是转载于：编程之路

iPhoneX底部安全区域适配

问题

解决方法

步骤 1

步骤 2

案例

效果

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开