一篇文章搞懂 Hybrid H5 开发中的刘海屏与安全区域问题

本文链接：https://blog.youkuaiyun.com/qq_37241934/article/details/143229232

前言

在开发Hybrid应用时，我们经常遇到需要自己设计导航栏的情况。这种设计必须考虑到不同设备的屏幕特性，比如iOS和Android设备的刘海屏和底部安全区域高度的问题。

移动设备的布局概述

在开发移动设备上的网页时，需要充分了解移动设备的布局特点。以下是一些关键的布局概念：

视口（Viewport）：移动设备的视口通常指浏览器的显示区域，可以通过meta标签设置视口属性，如宽度、高度和缩放比例。
刘海屏（Notch Screen）：现代智能手机，特别是iPhone X及以后和一些Android设备，采用了刘海屏设计，这意味着页面顶部可能存在区域被遮挡，因此开发时需要适配。
虚拟导航栏（Virtual Navigation Bar）：Android设备的虚拟导航栏会影响页面底部的显示，因此需要注意避免页面底部的内容被遮挡。
安全区域（Safe Area）：安全区域是指屏幕上不受刘海、圆角等物理特性影响的区域，开发者需要确保关键内容显示在这些区域内。

移动设备的布局图示

为了更好地理解iOS和Android设备的布局，我们可以参考以下图示：

在这里插入图片描述

如图所示，iOS和Android设备的布局有一些不同的地方：

状态栏（Status Bar）：iOS设备的状态栏高度为44 pts，而Android设备的状态栏高度为24 dp。
导航栏（Navigation Bar）：iOS导航栏高度为44 pts，而Android导航栏高度为56 dp。
布局边距（Layout Margin）：两种设备的布局边距通常为16 pts/dp。
底部区域：iOS有Home指示器（34 pts），而Android有导航栏（48 dp）。
标签栏（Tab Bar）：iOS设备的标签栏高度为49 pts，Android则没有类似的标签栏高度标准。
剩余的中心部分都是Safe Area （安全区域）

通过对比这些布局元素的高度，可以看出不同设备之间存在显著差异，因此在设计页面时必须特别注意，以确保页面在各种设备上都能正常显示。

1. 有系统导航栏的情况

iOS 设备：在iOS设备上，如果原生系统导航栏存在，通常导航栏会位于屏幕顶部，状态栏和导航栏高度会叠加。开发者在设计页面时需要确保顶部内容不会被遮挡。可以通过设置适当的padding-top来避免这种问题。例如，利用env(safe-area-inset-top)变量来为页面内容提供额外的顶部间距。
```
.header {
  padding-top: env(safe-area-inset-top, 44px); /* 考虑到导航栏和状态栏的高度 */
}
```
Android 设备：在Android设备上，系统导航栏通常位于屏幕底部或顶部。如果存在底部导航栏（虚拟按键），需要确保页面的底部内容不会被遮挡。因此，可以使用类似的CSS来提供额外的底部间距，保证页面内容显示在安全区域内。
```
.footer {
  padding-bottom: env(safe-area-inset-bottom, 56px); /* 防止内容被底部导航栏遮挡 */
}
```

2. 无系统导航栏的情况

全屏模式：在某些情况下，应用可能会进入全屏模式（如播放视频时或用户主动选择隐藏导航栏）。在这种情况下，页面的顶部和底部会有更多的可用空间。开发者需要动态检测设备的状态，并根据是否有系统导航栏调整页面布局。

<template>
  <div>
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer" :style="{ paddingBottom: footerPaddingBottom + 'px' }">Footer</div>
  </div>
</template>

<script>
export default {
  name: "FullscreenLayoutComponent",
  data() {
    return {
      footerPaddingBottom: 0,
    };
  },
  mounted() {
    // 页面加载后进行全屏检测
    this.adjustLayoutForFullscreen();
    // 监听窗口大小改变事件
    window.addEventListener('resize', this.adjustLayoutForFullscreen);
  },
  beforeDestroy() {
    // 移除事件监听，避免内存泄露
    window.removeEventListener('resize', this.adjustLayoutForFullscreen);
  },
  methods: {
    adjustLayoutForFullscreen() {
      const isFullscreen = window.innerHeight === screen.height;
      if (isFullscreen) {
        // 在全屏模式下移除底部边距
        this.footerPaddingBottom = 0;
      } else {
        // 非全屏时根据安全区域设置底部边距
        const safeAreaBottom = parseInt(
          getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')
        ) || 56;
        this.footerPaddingBottom = safeAreaBottom;
      }
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #f0f0f0;
  height: 50px;
}

.footer {
  background-color: #f0f0f0;
  height: 50px;
}

.content {
  min-height: 300px;
}
</style>

合理利用Safe Area：无论是在有导航栏还是无导航栏的情况下，利用env(safe-area-inset-*)变量来设置适当的边距，可以确保页面内容不会被遮挡，且能充分利用屏幕空间。
全屏优化：对于一些场景（如播放视频或图像），页面进入全屏模式后需要移除导航栏的间距，这样可以最大化可用的屏幕区域，提高用户体验。

刘海屏与安全区域概述

现代智能手机越来越多地采用刘海屏设计，这种设计会使得顶部存在无法直接利用的区域。同样，手机底部的虚拟导航栏也会导致内容无法覆盖整个屏幕。此外，由于不同设备的刘海屏设计和导航栏高度存在差异，开发人员需要为不同的设备提供不同的适配方案。

1. 安全区域的识别

安全区域（Safe Area）是指设备屏幕中不受刘海、圆角等影响的可用显示区域。在iOS设备上，特别是从iPhone X开始，苹果引入了刘海屏，这就意味着开发者需要注意避免将内容放在被遮挡的区域。

在Android设备上，特别是全面屏手机，也存在类似的需求，我们需要确保底部导航栏不遮挡页面的关键内容。

iOS 设备的适配

在iOS中，可以使用viewport-fit和CSS的env()来处理安全区域问题。具体步骤如下：

1.1 使用 `viewport-fit`

在HTML中设置meta标签，确保页面能够使用整个屏幕的区域。

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

这个设置确保网页能够扩展到整个屏幕，不被刘海区域限制。

1.2 使用 CSS 变量 `env()`

iOS 提供了几个内置的CSS环境变量来处理安全区域，分别是：

env(safe-area-inset-top): 刘海区域的高度
env(safe-area-inset-bottom): 底部安全区域的高度
env(safe-area-inset-left) 和 env(safe-area-inset-right): 左右的安全边距

通过这些变量，我们可以编写相应的CSS代码：

.header {
  padding-top: env(safe-area-inset-top, 20px); /* 考虑顶部刘海区域的高度 */
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.footer {
  padding-bottom: env(safe-area-inset-bottom, 20px); /* 考虑底部安全区域的高度 */
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

1.3 JavaScript 动态调整

在JavaScript中，我们也可以动态获取安全区域的高度，从而对页面进行更精细的调整。

function updateSafeAreaInsets() {
  const topInset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
  const bottomInset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;

  document.querySelector('.header').style.paddingTop = `${topInset}px`;
  document.querySelector('.footer').style.paddingBottom = `${bottomInset}px`;
}

document.addEventListener('DOMContentLoaded', updateSafeAreaInsets);
window.addEventListener('resize', updateSafeAreaInsets);

Android 设备的适配

在Android上，为了适配全面屏设备，我们可以使用Android官方推荐的edge-to-edge设计方案。具体可以通过CSS和JavaScript相结合来实现。

2.1 CSS 适配

首先，我们可以使用以下CSS代码来为Android设备提供基础的布局适配：

body {
  margin: 0;
  padding: 0;
}

.main-content {
  padding-bottom: env(safe-area-inset-bottom, 20px); /* 防止内容被虚拟导航栏遮挡 */
}

通用解决方案

为了同时适配iOS和Android设备，我们可以编写一套通用的代码来应对不同的屏幕特性。以下是一个简单的JavaScript示例，可以根据设备的特性调整页面的布局：

function updateSafeArea() {
  const topInset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
  const bottomInset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;

  document.querySelector('.header').style.paddingTop = `${topInset}px`;
  document.querySelector('.footer').style.paddingBottom = `${bottomInset}px`;
}

document.addEventListener('DOMContentLoaded', updateSafeArea);
window.addEventListener('resize', updateSafeArea);