安全区域

视窗
安全区域
禁用安全区域
安全间距和放置

随着 iPhone X 及后续机型的发布，苹果公司引入了所谓的安全区域，随后由 Google Chrome 实现并支持 Android。

在具有安全区域的设备上（例如具有顶部屏幕缺口的设备），应用程序 UI 必须在纵向模式下包含额外的顶部/底部间距（以考虑顶部缺口和底部栏），并在横向模式下包含额外的左侧/右侧间距（以考虑左侧/右侧缺口）。

视窗

如果您的应用程序面向全屏移动设备，请确保您的 <meta name="viewport"> 中包含 viewport-fit=cover，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- Make sure you have viewport-fit=cover in content -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
    />
  </head>

  <body>
    ...
  </body>
</html>

安全区域

要告知我们的组件应用程序是全屏应用程序，我们需要考虑安全区域，我们需要将 safe-areas 类添加到 Konsta UI 组件的父元素中，最好是添加到根应用程序元素中。

/* App.jsx */
import React from 'react';

export default function MyApp() {
  return (
    <>
      {/* add "safe-areas" class to the app root element */}
      <div id="my-app" className="safe-areas">
        ...
      </div>
    </>
  );
}

如果您使用 Konsta UI 的 App 组件，则可以使用 safeAreas 属性启用它

/* App.jsx */
import React from 'react';
import { App, ... } from 'konsta/react';

export default function MyApp() {
  return (
    <>
      {/* enable with safeAreas prop */}
      <App safeAreas theme="ios">
        ...
      </App>
    </>
  );
}

这是在 CSS 中定义 safe-areas 类的方式

:root: {
  --k-safe-area-left: 0px;
  --k-safe-area-right: 0px;
  --k-safe-area-top: 0px;
  --k-safe-area-bottom: 0px;
}

@supports (left: env(safe-area-inset-left)):  {
  .safe-areas: {
    --k-safe-area-left: env(safe-area-inset-left);
    --k-safe-area-right: env(safe-area-inset-right);
    --k-safe-area-top: env(safe-area-inset-top);
    --k-safe-area-bottom: env(safe-area-inset-bottom);
  }
}

禁用安全区域

在模态框和侧边面板（不是全屏元素）上禁用安全区域可能很有用。

我们可以使用以下实用程序类在某些元素上禁用安全区域

类
`.no-safe-areas`	禁用元素上的所有安全区域
`.no-safe-areas-top`	禁用元素上的顶部安全区域
`.no-safe-areas-right`	禁用元素上的右侧安全区域
`.no-safe-areas-bottom`	禁用元素上的底部安全区域
`.no-safe-areas-left`	禁用元素上的左侧安全区域

这是在 CSS 中定义 no-safe-areas 类的方式

@supports (left: env(safe-area-inset-left)):  {
  .no-safe-areas: {
    --k-safe-area-left: 0px;
    --k-safe-area-right: 0px;
    --k-safe-area-top: 0px;
    --k-safe-area-bottom: 0px;
  }
  .no-safe-areas-top: {
    --k-safe-area-top: 0px;
  }
  .no-safe-areas-right: {
    --k-safe-area-right: 0px;
  }
  .no-safe-areas-bottom: {
    --k-safe-area-bottom: 0px;
  }
  .no-safe-areas-left: {
    --k-safe-area-left: 0px;
  }
}

安全间距和放置

我们也可以在放置元素时考虑安全区域

类	CSS
`.top-safe`	`top: var(--k-safe-area-top)`
`.top-[value]-safe`	`top: calc([value] + var(--k-safe-area-top))`
`.right-safe`	`right: var(--k-safe-area-right)`
`.right-[value]-safe`	`right: calc([value] + var(--k-safe-area-right))`
`.bottom-safe`	`bottom: var(--k-safe-area-bottom)`
`.bottom-[value]-safe`	`bottom: calc([value] + var(--k-safe-area-bottom))`
`.left-safe`	`left: var(--k-safe-area-left)`
`.left-[value]-safe`	`left: calc([value] + var(--k-safe-area-left))`

边距和填充也一样

类	CSS
`.pt-safe`	`padding-top: var(--k-safe-area-top)`
`.pt-[value]-safe`	`padding-top: calc([value] + var(--k-safe-area-top))`
`.pr-safe`	`padding-right: var(--k-safe-area-right)`
`.pr-[value]-safe`	`padding-right: calc([value] + var(--k-safe-area-right))`
`.pb-safe`	`padding-bottom: var(--k-safe-area-bottom)`
`.pb-[value]-safe`	`padding-bottom: calc([value] + var(--k-safe-area-bottom))`
`.pl-safe`	`padding-left: var(--k-safe-area-left)`
`.pl-[value]-safe`	`padding-left: calc([value] + var(--k-safe-area-left))`

类	CSS
`.mt-safe`	`margin-top: var(--k-safe-area-top)`
`.mt-[value]-safe`	`margin-top: calc([value] + var(--k-safe-area-top))`
`.mr-safe`	`margin-right: var(--k-safe-area-right)`
`.mr-[value]-safe`	`margin-right: calc([value] + var(--k-safe-area-right))`
`.mb-safe`	`margin-bottom: var(--k-safe-area-bottom)`
`.mb-[value]-safe`	`margin-bottom: calc([value] + var(--k-safe-area-bottom))`
`.ml-safe`	`margin-left: var(--k-safe-area-left)`
`.ml-[value]-safe`	`margin-left: calc([value] + var(--k-safe-area-left))`

例如

{
/*
"left-safe" class will set:
  left: var(--k-safe-area-top);

"bottom-4-safe" class will set:
  bottom: calc(1rem + var(--k-safe-area-bottom));
*/
}
<div className="left-safe bottom-4-safe">...</div>;