JavaScript 下如何获取刘海屏的安全区域高度

2023-10-23 21:50:54

刘海屏自 iPhone X 问世以来，在手机领域可谓大放异彩。其出色的视觉效果和更高的屏占比深受广大用户的喜爱。但刘海屏在带来视觉享受的同时，也给开发者们带来了新的挑战。由于刘海屏的存在，开发者需要考虑在不同设备上的适配问题，尤其是安全区域的适配。

安全区域 是设备屏幕上不包含刘海或其他遮挡物（如摄像头）的区域。在安全区域内，开发者可以自由地放置内容，而不用担心被刘海遮挡。

本文将重点介绍如何在 JavaScript 中获取刘海屏的安全区域高度。

使用 window.visualViewport

在 JavaScript 中，可以通过 window.visualViewport 对象获取安全区域的高度。window.visualViewport 对象包含有关设备视口的各种信息，包括安全区域的尺寸。

const visualViewport = window.visualViewport;
const safeAreaHeight = visualViewport.safeAreaInset.top + visualViewport.safeAreaInset.bottom;

使用 CSS `env()` 函数

在 CSS 中，可以使用 env() 函数读取安全区域的尺寸。env() 函数可以获取自定义属性和环境变量的值。

/* 定义安全区域高度的自定义属性 */
:root {
  --safe-area-height: env(safe-area-inset-top) + env(safe-area-inset-bottom);
}

/* 获取自定义属性 */
const safeAreaHeight = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-height');

需要注意的是，env() 函数只能在 CSS 中使用，不能直接在 JavaScript 中使用。