先在头部加上下面的代码

<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);
文章目录