CSS适配iOS全面屏底部横条-钻芒博客

最近在看开发者避雷指南-百度搜索算法规范详解时，发现里边有写到页面机型适配:
所有开发者应对资源页面做好不同手机型号的适配效果，不影响用户的正常浏览使用。其中IOS全面屏手机底部横线不可遮挡页面的具体功能和内容。

在head头部代码中添加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

CSS中添加

在iOS的系统中，为了实现简单的底部适配，苹果设计了一个安全区域的css属性值，哪里需要就加在哪里

.nav{  
/*原高度*/
height:60px;  
/*全面屏适配*/
height:calc(60px + constant(safe-area-inset-bottom));
height:calc(60px + env(safe-area-inset-bottom));
}

CSS适配iOS全面屏底部横条