useScreenSafeArea

リアクティブな env(safe-area-inset-*)

使用法

ページを画面全体に表示するためには、まず viewport メタタグ内に追加属性 viewport-fit=cover を設定する必要があります。viewport メタタグは次のようになります：

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

その後、以下のようにコンポーネント内で useScreenSafeArea を使用できます：

import { useScreenSafeArea } from '@vueuse/core'

const {
  top,
  right,
  bottom,
  left,
} = useScreenSafeArea()

詳細については、次のドキュメントを参照してください：Designing Websites for iPhone X

コンポーネントの使用法

<template>
  <UseScreenSafeArea top right bottom left>
    content
  </UseScreenSafeArea>
</template>