CSS适配iOS全面屏底部横条，所有开发者应对资源页面做好不同手机型号的适配效果，不影响用户的正常浏览使用。其中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));
}
效果如图：
微信扫一扫，打开小程序浏览更便捷
原创文章，作者：howkunet，如若转载，请注明出处：https://www.intoep.com/frontend/62805.html
微信扫一扫
支付宝扫一扫
相关推荐
-
解决访问国外公共静态资源速度慢的问题
由于众所周知的原因，jsdelivr国内被墙，部分地区可能无法正常访问，其他国外的公共静态资源也存在访问速度慢或无法正常访问的问题，为解决该问题，辉哥博客&蓝易云安全开发了国外静态资源js和css资源CDN替换国内的脚本，供所有用户免费使用。
-
PHP使用http_build_query()构造URL字符串的方法
1、明确需求 实战工作中经常会请求各种各样的接口，例如 • 微信网页授权接口 • 高德周边检索接口 • 发现：下图是根据接口文档开发后的代码，发现代码可读性差（ps. 参数的作用不…
-
推荐一款免费的网页打印控件
做过网页打印的应该都清楚，如果想使用js直接调用本地打印机进行打印任务都需要基于打印控件，因为js不能直接调用打印机，即使是google浏览器也是内置的打印控件。 网页打印控件比较…
-
JS的六种打断点的方式，你用过几种？
Debugger 是前端开发很重要的一个工具，它可以在我们关心的代码处断住，通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。 Chrome Dev…
-
vue3打印解决方案：Vue-Plugin-HiPrint
Vue-Plugin-HiPrint 是一个Vue.js的插件，旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint，您可以轻松地在Vue.js应用程序中实现高度定制的打印功能。但是本文只简单介绍 Vue-Plugin-HiPrint 在vue3中如何使用固定模板打印的使用方法，以便可以快速集成并使用它。