彻底告别齐刘海与底部小黑条：iOS顶部和底部安全区域适配指南

适配移动网页，告别齐刘海与底部小黑条

知识点速递

Viewport-fit： 苹果为适配 iPhoneX 而扩展的 viewport meta 标签特性，用于设置网页在可视窗口中的布局方式，可选值有：contain（完全包含）、cover（完全覆盖）和 auto（默认，等同于 contain）。

Vh 和 vw： 分别代表视口高度和视口宽度，单位为百分比。例如，1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。

Media Query： 根据设备屏幕尺寸、方向、分辨率等条件改变网页样式。

适配步骤

1. 头部元标签： 添加 <meta name="viewport" content="width=device-width,initial-scale=1.0">，确保网页自适应屏幕宽度。<meta name="apple-mobile-web-app-capable" content="yes"> 允许网页全屏显示。

2. Viewport-fit 属性： 使用 viewport-fit 设置网页在可视窗口中的布局方式，建议使用 cover。

3. Vh 和 vw 单位： 用 vh 和 vw 定义元素大小和位置，防止被齐刘海和底部小黑条遮挡。

4. Media Query 适配： 针对 iPhoneX 和其他设备分别设置样式，适配不同屏幕尺寸。

注意事项

1. 设置 viewport-fit 属性时，必须同时设置 width 和 height 属性，否则可能变形。

2. 使用 vh 和 vw 单位时，确保元素在所有设备上显示正常。

3. 使用 media query 时，针对不同设备设置不同样式，以适应不同屏幕尺寸。

代码示例

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
  .header {
    height: 6vh;
    background-color: #f00;
  }

  .content {
    padding-top: 6vh;
    padding-bottom: 10vh;
  }

  .footer {
    height: 10vh;
    background-color: #00f;
  }

  @media (device-width: 375px) and (device-height: 812px) {
    .content {
      padding-top: 8vh;
      padding-bottom: 12vh;
    }
  }
</style>

常见问题解答

1. 为什么需要适配齐刘海和底部小黑条？ 为了避免网页内容被遮挡，影响用户体验。

2. Viewport-fit 属性有什么作用？ 设置网页在可视窗口中的布局方式，确保内容完全覆盖或完全包含在可视窗口中。

3. 如何使用 vh 和 vw 单位？ 用它们定义元素的大小和位置，使元素不受齐刘海和底部小黑条的影响。

4. 为什么要使用 media query？ 针对不同屏幕尺寸设置不同的样式，让网页在所有设备上都能良好显示。

5. 适配时有哪些需要注意的？ 设置 viewport-fit 属性时要同时设置 width 和 height 属性，使用 vh 和 vw 单位时要确保元素在所有设备上显示正常，使用 media query 时要针对不同设备设置不同样式。