关于H5移动端开发 iPhone X适配

一、　媒体查询、

@media screen and (device-width:375px) and (device-height:812px){
    #header {
        height: 88px;
        padding-top: 44px !important;
    }
    .mui-content {
        padding-top: 88px !important;
    }
}

二、iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport 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">

 三、测试中发现如果页面内容不够多的时候。底部会有白色的间距，测试为44px，这需要设置页面的高度加44，应该是ios11的bug。

$(".mui-content").css("height"，(window.innerHeight+44)+"px");

 

转载于:https://www.cnblogs.com/xianxianxxx/p/7851104.html