css：ios底部安全距离适配
背景
我们做在 ios 的 web 页面时候，需要适配底部的黑边，加上安全距离。
IOS新特性
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
contain: 可视窗口完全包含网页内容cover：网页内容完全覆盖可视窗口auto：默认值，跟 contain 表现一致注意：网页默认不添加扩展的表现是 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://m.huajiangbk.com/newsview1260732.html
| 上一篇: 筑牢返乡平安路，共话安全零距离 |
下一篇: 锅炉房与周边建筑物安全距离是多少 |
