针对于移动端的兼容适配

前言

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

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

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

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

    <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(), 然而我在微信端进行测试的时候,并没有效果,所以上述方案被我砍掉了,接下来进入正题

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

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

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

代码如下:

    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还是其他布局

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

这是我的原创文章,如果觉得不错,可以打个赏~
0%