useScreenSafeArea

响应式 env(safe-area-inset-*) 。

Demo

使用

为了让页面在屏幕中完全渲染，首先必须在 viewport meta 标签中设置额外的属性 viewport-fit=cover，viewport meta 标签可能看起来像这样：

<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 包提供一个无渲染组件版本。了解更多用法。

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

类型声明

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

useScreenOrientation

useScriptTag