css：ios底部安全距离适配

背景

我们做在 ios 的 web 页面时候，需要适配底部的黑边，加上安全距离。

IOS新特性

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，小程序里的viewport-fit默认是cover

实践

height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2 height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2 padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2 padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2 // 先constant再env 1234567 safe-area-inset-left：安全区域距离左边边界距离safe-area-inset-right：安全区域距离右边边界距离safe-area-inset-top：安全区域距离顶部边界距离safe-area-inset-bottom：安全区域距离底部边界距离

效果

参考文档

https://blog.csdn.net/qq_42354773/article/details/81018615

相关知识

移动端适配及PC端适配心得总结体会(二) (可能比较全
移动端H5开发之页面适配篇
[移动端适配]从一个祖传项目谈移动端vw适配一. 什么是vw适配 二. vw适配的兼容性 三. 如何在移动端H5项目w
使用Flexible实现手淘H5页面的终端适配(转)
Web移动端最强适配方案总结，没想到这么好用！
手机web移动端适配方案原理分析
移动app开发 和 网页适配移动端 有多大区别？
web移动端适配（二）移动端的3种适配方法
移动端的几种适配方案
移动端适配解决方案

网址: css：ios底部安全距离适配 https://www.huajiangbk.com/newsview1260732.html