前言

最近,正在改版之前写的公众号，由于之前的也没有对iphoneX进行适配，所以新改版的就想针对下iphoneX做一个小的适配。

也可能是因为公司有钱人越来越多了 = =，好几个人买了iphoneX，所以也有设备进行测试

闲话不多说，接下来进行码代码时间

在很多博客中我们知道，ios11中，meta标签中提供了viewport-fit来作为iphoneX的适配方案，则就是将meta设置为下面这句话：

Code

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

= =iOS 11中的WebKit包含了一个新的CSS函数constant()，然而我在微信端进行测试的时候，并没有效果，所以上述方案被我砍掉了，接下来进入正题

我这里采用的是媒体查询的适配方法，代码如下：

css

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .bottom-bar {
        padding-bottom: 34px;
    }
}

ps：目前发现通过 env(safe-area-inset-bottom) 变量名可以实现上面的方案，所以代码如下:

css

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

针对于移动端fixed和input获取焦点软键盘弹出影响定位的问题

代码如下：

javascript

var h = document.body.scrollHeight;
var oBottomBar = document.querySelector('.bottom-bar');
window.onresize = function () {
    if (document.body.scrollHeight < h) {
        oBottomBar.style.display = "none";
    } else {
        oBottomBar.style.display = "flex";
    }
};

ps:我这里使用了flex布局的，所以根据各位的需要修改成block/flex还是其他布局

最后，谢谢各位观众老爷们的观看