Vue 移动端 js 获取 css 安全距离safearea

App.vue

获取safearea 用于js计算高度或滚动计算

created() {
	setTimeout(e => {
		let safeTop = getComputedStyle(document.documentElement).getPropertyValue("--safeTop");
		let safeBottom = getComputedStyle(document.documentElement).getPropertyValue("--safeBottom")
		safeTop = parseInt(safeTop.replace('px', ''))
		safeBottom = parseInt(safeBottom.replace('px', ''))
		this.$store.state.safeTop = safeTop
		this.$store.state.safeBottom = safeBottom
		console.log('--safeArea', safeTop, safeBottom)
                //todo 展示你的页面
	}, 300)
}

:root {
	--safeTop: env(safe-area-inset-top);
	--safeBottom: env(safe-area-inset-bottom);
}