iPhone 安全距离适配，拒绝遮挡！

前端

2023-11-24 09:02:19

对于移动端开发者来说，适配 iPhone 的安全距离是一项必不可少的技能，可以让你的应用在各种 iPhone 机型上完美展示。本文将深入探讨 iPhone 安全距离适配，让你掌握如何在 H5 页面中轻松实现它。

安全距离简介

安全距离指的是 iPhone 屏幕上不受圆角、齐刘海、小黑条等元素影响的可视区域，确保内容不会被遮挡或变形。对于 H5 页面而言，适配安全距离至关重要，它可以保证页面元素在不同机型上始终处于正确的位置。

H5 安全距离适配

在 H5 页面中适配安全距离，需要以下步骤：

获取安全距离值： 通过 JavaScript 或 CSS 获取 iPhone 机型的安全距离值。
设置外层容器： 创建一个外层容器，并将其定位在安全距离内。
设置内层元素： 将页面元素放置在外层容器内，并对其进行定位和填充。

实践示例

以下是一个在 H5 页面中适配安全距离的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
    }
    #container {
      width: 100vw;
      height: 100vh;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    #content {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="content">
      <h1>iPhone 安全距离适配</h1>
    </div>
  </div>
</body>
</html>