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

百度解释如下

CSS适配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全面屏底部横条-钻芒博客

相关链接