關於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");