useScreenSafeArea
响应式 env(safe-area-inset-*)
演示
顶部
右侧
底部
左侧
用法
为了使页面在屏幕上完全渲染,必须首先在 viewport
meta 标签中设置附加属性 viewport-fit=cover
,viewport meta 标签可能如下所示
html
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
然后我们可以在组件中使用 useScreenSafeArea
,如下所示
ts
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>
类型声明
ts
/**
* Reactive `env(safe-area-inset-*)`
*
* @see https://vueuse.org.cn/useScreenSafeArea
*/
export declare function useScreenSafeArea(): {
top: ShallowRef<string, string>
right: ShallowRef<string, string>
bottom: ShallowRef<string, string>
left: ShallowRef<string, string>
update: () => void
}
export type UseScreenSafeAreaReturn = ReturnType<typeof useScreenSafeArea>