如何适配处理iphoneX底部的横条？(转)

梦里梦外; 2021-09-19 21:32 725阅读 0赞

iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，怎么适配解决呢？

**第一步：**

**第二步：**

页面主体内容限定在安全区域内,如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况

body \{ padding-bottom: env(safe-area-inset-bottom); \}

**第三步：**

fixed 元素的适配

第一种：padding-bottom: env(safe-area-inset-bottom);  
　　　　　　　　注意元素是否设置box-sizing:border-box;否则不起作用，道理就不说了。  
　　　　第二种：height: calc(60px(假设值) + env(safe-area-inset-bottom));  
　　　　第三种：margin-bottom: env(safe-area-inset-bottom);

这三种方式都可解决，视情况而定选择合适的，也可以灵活为fixed 元素的子元素添加这些属性

**使用 @supports**  
　　　　一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式：  
　　　　@supports (bottom: env(safe-area-inset-bottom)) \{  
　　　　　　div \{  
　　　　　　　　margin-bottom: env(safe-area-inset-bottom);  
　　　　　　\}  
　　　　\}

下面是一些拓展知识点：

1.iphoneX业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了,所以需要对iphonx 适配

viewport-fit：  
　　　　　　　　contain: 可视化窗口完全包含网页内容  
　　　　　　　　cover: 网页内容完全覆盖  
　　　　　　　　auto: 默认值和 contain 一样

2.ios11 增加新特性，webkit 的 css 函数

*　　　　　　*四个预定义变量为设定安全区域和边界的距离，如下:  
　　　　　　　　safe-area-inset-left：安全区域距离左边边界距离  
　　　　　　　　safe-area-inset-right：安全区域距离右边边界距离  
　　　　　　　　safe-area-inset-top：安全区域距离顶部边界距离;在刘海全屏的时候 top 为 44px  
　　　　　　　　safe-area-inset-bottom：安全区域距离底部边界距离;刘海全屏的条件下是 34px

css 函数 env() 和 constant()  
　　　　　　　　上面两个函数可以直接使用变量函数，只有在 webkit 内核下才支持  
　　　　　　　　env() 必须在 ios >= 11.2 才支持  
　　　　　　　　constant() 必须 ios < 11.2 支持  
　　　　　　　　**env 和 constant 只有在 viewport-fit=cover 时候才能生效**  
　　　　　　　　兼容前后版本,例子：  
　　　　　　　　　　padding-top: constant(safe-area-inset-top);  
　　　　　　　　　　padding-top: env(safe-area-inset-top);

原文链接 : [http://www.manongjc.com/article/76141.html][http_www.manongjc.com_article_76141.html]

[http_www.manongjc.com_article_76141.html]: http://www.manongjc.com/article/76141.html