セーフエリア

ビューポート
セーフエリア
セーフエリアの無効化
セーフエリアの間隔と配置

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コンポーネントに伝えるには、Konsta UIコンポーネントの親要素（できればアプリのルート要素）に`safe-areas`クラスを追加する必要があります。

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

Konsta UIのAppコンポーネントを使用する場合は、`safeAreas`プロップで有効にすることができます。

<!-- App.vue -->
<template>
  <!-- enable with safeAreas prop -->
  <k-app safe-areas theme="ios">
    <HomePage />
  </k-app>
</template>
<script>
  import { kApp } from 'konsta/vue';

  export default {
    components: {
      kApp,
    },
  };
</script>

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>;