移动端真的是幺蛾子比较多，苹果抽风出的这几款手机都带bar  为了处理这类问题必須在页面上做相应的处理

比如吸底按钮 或者其他元素需要给最后一个元素添加一个距离底部的高度 尺寸一般是34px

通过js来判断是否是这四种手機的类型  代码如下：

这种方法肯定不是理想的，那么官网提供了如下方法：

第一步：设置网页在可视窗口的布局方式
新增 viweport-fit 属性使得页面內容完全覆盖整个窗口：
 

 


 

1.contain可视窗口完全包涵网页内容

2.cover 网页内容完全覆盖可是窗口

viewport-fit是ios11新增的特性，同时还给css新增了一个函数constant函数，用来设置安全区域与边界的距离 有四个预定义的变量

 

 这样再去测试，基本没什么问题了
 
 

 
 

 京东凹凸实验室适配总结.