先在头部加上下面的代码
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover" />
然后就可以使用以下变量了,直接把他当一个高度的数值使用即可
/* 适配IOS 11以上 */
env(safe-area-inset-bottom)
/* 适配IOS 11以下 */
constant(safe-area-inset-bottom)
/* 示例 */
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
/* 也可以用于计算属性,其他自己随意发挥 */
padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);