mui App 关于iPhonex 页面适配问题

按照网上方法:
引入

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

使用

@supports(bottom : env(safe-area-inset-bottom)){
    selector{
        bottom:env(safe-area-inset-bottom);
}
}

看效果ok,换手机5c 也ok,万万没想到6s,竟然也调用了该样式。
最后只能用简单粗暴的方法plus.device.model 来做适配。
具体方法:
普通屏幕手机的状态栏高度是24,而iPhoneX 状态栏的高度44,下巴的高度是34。

//plusReady之后
if(plus.device.model === 'iPhoneX'){
    //通过js来做适配
    var imgElement = document.getElementsByClassId("img");
    document.getElementById("bottomx").style.paddingBottom = '34px';
    imgElement.style.top = (imgElement.style.top +  20)+'px';
}



你可能感兴趣的:(mui框架,iPhoneX适配)