iPhoneX 及以上 手机底部适配 CSS3

概述：iOS移动端设备从iphoneX之后几乎都是全面屏，刘海屏。但是像这种全面屏的iOS设备，在底部有一个菜单呼出按钮，这个时候我们就需要进行相应的适配。这里我简单记录下我自己在工作中使用的适配方式。

1. 需求场景
   实现iPhoneX 及以上的手机底部适配，
   当浏览器底部的菜单栏被隐藏的时候，位于底部的选项框自动增加高度
   当浏览器底部的菜单栏被显示的时候，位于底部的选项框自动减少高度

2. 实现方式
   在css中有一个计算属性 calc() , 将需要计算的值（带单位）放到这个属性中，就能够实现计算

例如：

.footer{height:calc(10px + 20px);width:calc(10vw + 20%);
}

在iOS的系统中，为了实现简单的底部适配，苹果设计了一个安全区域的css属性值，哪里需要就加在哪里

 constant(safe-area-inset-bottom);env(safe-area-inset-bottom);

例如

.footer{height:calc(10px + constant(safe-area-inset-bottom));height:calc(10px + env(safe-area-inset-bottom));
}

这样就能够实现iPhone底部的自动适配了

3. 结语
   其实使用CSS 对iOS高版本的底部适配还是比较简单的，还有就是通过屏幕的逻辑分辨率和浏览器的navigator.useragent的识别来实现不同机型的判断，这个js比较繁琐就不详述了，还是希望大家简单快捷的解决当前的问题。希望大家能够有所收获！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！