useScreenSafeArea

カテゴリ

ブラウザ

エクスポートサイズ

1.5 kB

最終変更

先週

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

デモ

ソース

上

右

下

左

使い方

ページを画面全体に完全にレンダリングするには、まず viewport メタタグ内に viewport-fit=cover という追加の属性を設定する必要があります。viewport メタタグは次のようになります。

html

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

次に、コンポーネントで useScreenSafeArea を以下のように使用できます。

import { useScreenSafeArea } from '@vueuse/core'

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

詳細については、このドキュメントを参照してください: iPhone X 用のウェブサイトのデザイン

コンポーネントの使用方法

この関数は、@vueuse/components パッケージを介して、レンダーレスコンポーネントバージョンも提供します。使用方法の詳細。

vue

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

型宣言

typescript

/**
 * Reactive `env(safe-area-inset-*)`
 *
 * @see https://vueuse.dokyumento.jp/useScreenSafeArea
 */
export declare function useScreenSafeArea(): {
  top: Ref<string, string>
  right: Ref<string, string>
  bottom: Ref<string, string>
  left: Ref<string, string>
  update: () => void
}