H5 苹果系统底部安全区
先在头部加上下面的代码
<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);
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。