APP 嵌入 h5页面的总结 4

最新推荐文章于 2025-09-23 20:10:09 发布

原创最新推荐文章于 2025-09-23 20:10:09 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

本文主要讨论iPhone X的适配问题，介绍了viewport-fit的可选值及四个css常量设置安全区域，通过媒体查询解决适配问题。还提到其他iOS机型电池条成安全区的样式处理，以及fixed元素定位问题。此外，按钮文字上下居中问题待解决。

这篇谈谈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，等等其他机型也一样，这样才解决了问题，至此结束

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