useScreenSafeArea

類別

瀏覽器

導出大小

1.5 kB

上次變更

3 週前

響應式 env(safe-area-inset-*)

示範

來源

頂部

右側

底部

左側

用法

為了使頁面完全在螢幕中呈現，必須首先設定 viewport meta 標籤內的額外屬性 viewport-fit=cover，viewport meta 標籤可能如下所示

html

<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

元件用法

此函數也透過 @vueuse/components 套件提供無渲染元件版本。了解更多關於用法的資訊。

vue

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

類型宣告

typescript

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