动手适配

在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));
}

解决方案

首先对meta标签添加一条属性。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover即可。

viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：
contain 可视窗口完全包含网页内容

cover：网页内容完全覆盖可视窗口

auto：默认值，跟 contain 表现一致

关键就是我们要设置为cover。

然后我们需要设置安全距离，其实就是拿到底部按钮的高度。

body {
    padding-bottom: constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom);
}

注意这两条css的顺序，constant是最新的标准，应用于IOS11.2之后的版本，之前则是使用env，按照css的兼容性写法，最新的写前面，优先使用，兼容的写后面。

这样我们的body就会在x设备上，底部padding多出一部分值，如果是其他设备，则无效果。

这样我们就可以方便操作了，比如：

.safe {
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #fff;
    overflow: hidden;
  }

设置一个class，他的高度为底部按钮的高度，然后放在html底部，这样，内容在x设备上就会撑出底部小黑条按钮高度，不影响网页使用。

当然也可以用于fixed布局bottom的值，具体就看自己怎么用了。

http://www.mulingyuer.com/archives/660/