mui App 关于iPhonex 页面适配问题

miskss

于 2018-07-03 21:46:12 发布

阅读量5.1k

点赞数

分类专栏： mui框架文章标签： iPhoneX适配

本文链接：https://blog.youkuaiyun.com/wanping321/article/details/80904854

版权

mui框架专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种针对iPhoneX底部安全区域的适配方案。利用JavaScript进行判断和调整，确保不同设备上的布局正确显示。特别关注了状态栏及底部间距的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照网上方法：
引入

        <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';
}