关于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");

巴特西

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

最新文章

热门文章