H5 iphoneX 适配方案

作者: 风之化身呀 | 来源:发表于2018-03-12 12:48 被阅读171次

step1、添加头

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no, viewport-fit=cover">

step2、添加css

// 方案1：媒体查询（推荐）
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
        padding-bottom:20px;
    }
// 方案2：属性支持判断
@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}

// Tips:supports语法
@supports(prop:value) {
    /* 各种样式 */
}

注意：
1、对于固定在底部的元素，需设置bottom至安全区域以外
附：iPhone系列手机参数