CSS适配iOS全面屏底部横条 |
您所在的位置：网站首页 › 仿ios小横条怎么自动变色彩 › CSS适配iOS全面屏底部横条 |
CSS适配iOS全面屏底部横条
|
最近在看 开发者避雷指南-百度搜索算法规范详解时，发现里边有写到 页面机型适配: 所有开发者应对资源页面做好不同手机型号的适配效果，不影响用户的正常浏览使用。其中IOS全面屏手机底部横线不可遮挡页面的具体功能和内容。  百度解释如下 动手适配在head头部代码中添加 代码语言：javascript复制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 
|
【本文地址】
今日新闻 |
推荐新闻 |