CSS适配iOS全面屏底部横条

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

百度解释如下

%title插图%num

动手适配

在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));
} 

效果如图

%title插图%num

相关链接

为TA充电
共{{data.count}}人
人已赞赏
WordpressWordPress优化

wordpress使用Cachify加速waiting ttfb加载时间

2021-3-23 14:53:36

WordpressWordPress优化

WordPress批量修改文章发布状态,计划发布修改已发布,发布状态待审核等

2021-3-26 11:56:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索