CSS适配iOS全面屏底部横条

最近在看 开发者避雷指南-百度搜索算法规范详解时，发现里边有写到 页面机型适配:

所有开发者应对资源页面做好不同手机型号的适配效果，不影响用户的正常浏览使用。其中IOS全面屏手机底部横线不可遮挡页面的具体功能和内容。

百度解释如下

动手适配

在head头部代码中添加

代码语言：javascript复制

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

CSS中添加

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

代码语言：javascript复制

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

效果如图

https://60yu.w4i.cn/2021/20210325-5d85eb0e8f330.gif

ios css

0 人点赞