原来的ios安全区域适配方案
在meta中设置: viewport-fit=cover
下面是一段在umi中的配置,仅举例,不使用umi的情况可以自己看加到具体位置。
metas: [
{
name: 'viewport',
content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'
},
],
代码中使用:(直接使用css样式)
height: calc(100vh - constant(safe-area-inset-top)); /* 兼容 iOS<11.2 */
height: calc(100vh - env(safe-area-inset-top)); /* 兼容iOS>= 11.2 */
那现在新的问题出现了,如果你们的安卓使用了沉浸式开发的主题,状态栏(工具栏)就和你的页面重合了
解决方案:
- 安卓端添加状态栏高度到userAgent中,或者也可以通过bridge通信给到H5,最好是dp的单位,H5侧拿过来可以直接当做px使用。
- 在初始化的代码中:
export default function initSetStyleProperty(): void {
document.documentElement.style.setProperty(
'--android-status-bar-height',
`${0}px`,
);
const { userAgent } = window.navigator;
if (/android/i.test(userAgent)) { // 这里是判断安卓环境的代码,可以使用
const statusBarHeightRegex = /statusBarHeight=(\d+)/;
const match = statusBarHeightRegex.exec(userAgent);
if (match) {
document.documentElement.style.setProperty(
'--android-status-bar-height',
`${match[1]}px`,
);
}
}
}
- 使用
height: calc(100vh - constant(safe-area-inset-top) - var(--android-status-bar-height));
height: calc(100vh - env(safe-area-inset-top) - var(--android-status-bar-height));
完美解决问题,避免使用js来判断环境再去设置样式的复杂操作。