小程序包括uniapp针对安全区域env(safe-area-inset-*)兼容

发布网友发布时间：2022-12-13 03:14

共1个回答

热心网友时间：2023-11-21 20:05

https://ask.dcloud.net.cn/article/36494

page {

--safe-area-inset-top:0px;

--safe-area-inset-right:0px;

--safe-area-inset-bottom:0px;

--safe-area-inset-left:0px;

}

@supports (top: constant(safe-area-inset-top)) {

page {

--safe-area-inset-top: constant(safe-area-inset-top);

--safe-area-inset-right: constant(safe-area-inset-right);

--safe-area-inset-bottom: constant(safe-area-inset-bottom);

--safe-area-inset-left: constant(safe-area-inset-left);

}

}

@supports (top: env(safe-area-inset-top)) {

page {

--safe-area-inset-top: env(safe-area-inset-top);

--safe-area-inset-right: env(safe-area-inset-right);

--safe-area-inset-bottom: env(safe-area-inset-bottom);

--safe-area-inset-left: env(safe-area-inset-left);

}

}

```用法：

1、margin-top: var(--status-bar-height);

2、height: calc(100vh - 88rpx - 100rpx - var(--safe-area-inset-bottom) - var(--status-bar-height));