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
微信赞赏
支付宝赞赏
常用的一些CSS代码规则：限制视口内的内容宽度、增加正文文本大小、增加文本行之间的间距、限制图片宽度、限制内容中文本的宽度、以更平衡的方式包裹标题、表单控件颜色与页面样式匹配、易于跟随的表格行
最近写了一个网页，页面很多元素使用的是Fixed定位，当在手机端的Safari浏览器、安卓浏览器等测试时，会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是，我查阅…
近期由于工作需要要修改table表格导航条样式。本人特整理出相关代码，以及最后效果，供各位小伙伴参考。 具体代码如下： .xp-table-content ::-webkit-sc…
