CSS适配iOS全面屏底部横条

AlexTao

修改于 2023-05-16 13:08:12

3.5K0

修改于 2023-05-16 13:08:12

文章被收录于专栏：钻芒博客钻芒博客

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

所有开发者应对资源页面做好不同手机型号的适配效果，不影响用户的正常浏览使用。其中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));
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度