APP 嵌入 h5页面的总结 4

这篇谈谈iPhoneX的适配问题以及按钮上下居中问题

iPhone X的头部是44px，底部是34px，

viewport 可以设置的选项就是 viewport-fit,它有三个可选值：

 

• contain: The viewport should fully contain the web content. 可视窗口完全包含网页内容

• cover: The web content should fully cover the viewport. 网页内容完全覆盖可视窗口

• auto: The default value, 同contain的作用

四个css常量设置安全区域

• constant(safe-area-inset-top)：来自视口顶部的安全区域插入量（以CSS像素为单位）
• constant(safe-area-inset-bottom)：从视口底部的安全区域插入量（以CSS像素为单位）。
• constant(safe-area-inset-left)：从视口左侧的安全区域插入量（以CSS像素为单位）
• constant(safe-area-inset-right)：从视口右侧的安全区域插入量（以CSS像素为单位）

/* 适配iphonex */
@media only screen and (device-width: 375px) and (device-height: 812px) and
(-webkit-device-pixel-ratio: 3) {
    
    /*增加底部适配层*/
    footer{
        height: 1.78rem;
        box-sizing: border-box;
        padding-bottom: 0.68rem;
        &:after {
            content: '';
            z-index: 9998;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.68rem;
            background: #f7f7f8;
        }
    }
    .footerBtn{
        bottom: 1.78rem;
    }
}

 

我涉及到的没有那么复杂，只是用上面的媒体查询就解决了遇到的问题

更新更新~

说好viewport-fit是iPhone X特性呢，结果其他ios机型的电池条也成了安全区，所以公共样式要padding-top:20px了，当然20px要换成rem单位，然后那个fixed的元素在不满一屏内容的页面总是定位不到想要的位置，最后发现要写个最小高度为屏幕高度啊，还好ios机型就那么几个，高度也明确，这要是换成安卓，得疯，所以要注意这个问题啦，也有说写body和html元素写height:100%，但在我的项目里并不好用，最后只有写死高度才行，比如iPhone X写死高度为812px，等等其他机型也一样，这样才解决了问题，至此结束

 

按钮文字上下居中的问题，试了好多种办法都没有完美解决，待解决后再来更新记录