安全區域

視窗
安全區域
停用安全區域
安全間距 & 配置

隨著 iPhone X 的發布以及後續機種，Apple 引入了所謂的安全區域，後來 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>

安全區域

為了告訴我們的元件，我們的應用程式是全螢幕應用程式，並且我們需要考慮安全區域，我們需要在 Konsta UI 元件的父元素中新增 safe-areas 類別，最好是新增到根應用程式元素。

<!-- App.svelte  -->
<!-- add "safe-areas" class to the app root element -->
<div id="my-app" class="safe-areas">...</div>

如果您使用 Konsta UI 的 App 元件，則可以使用 safeAreas 屬性啟用它

<!-- App.svelte -->
<script>
  import { App } from 'konsta/svelte';
</script>

<!-- enable with safeAreas prop -->
<App safeAreas theme="ios">
  <HomePage />
</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 class="left-safe bottom-4-safe">...</div>;