iPhone X H5 适配通用方案

[shiiiiiiji]

说明

iPhone X 适配理论上需要在 UI 预先适配的基础上再做前端页面的适配，以保证 iPhone X 下的最佳体验。但因为项目复杂，涉及改动点较多，可暂时采用此方案。

局限性主要体现在fixed元素无法使用通用的样式适配。且涉及到是否吸底，吸底元素是否可以简单移动位置还是需要增加元素高度又能保证中间内容看起来“垂直居中”。

需要适配点

• 整体页面显示位置（内容）
• fixed + bottom = 0
• fixed + bottom > 0
• absolute + bottom = 0
• 瀑布流列表加载中文案可能触底 - 组件内修改
• 沉浸（状态）式H5页面头部高度 - 需个性化修改

通用解决方案

针对前面4个适配点，给出适配方案如下：

1.修改 meta 标签中，加入viewport-fit=cover，使在 iPhone X 下页面全屏覆盖，并且后面相应的 hack 属性能生效。

<meta name="viewport" content="...,viewport-fit=cover">

2.修改 body 内边距。在通用 CSS 中添加下面代码。其中constant和env是 iOS 10+ 上才能识别的 CSS 方法，safe-area-inset-bottom是底部的安全距离，一般是34px（防止 iPhone X Plus 之类的，还是用个统一的官方变量比较好）（注意：样式需要放到最后，保证不会被覆盖）

@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    body {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

3.针对fixed定位的元素，因为其是相对于浏览器窗口进行定位的，所以 body 的内容区域无法限制其位置，需要调整其位置。采用以下通用 js 解决。(注意：需放置页面最后，保证页面元素已渲染到页面，用户能感知到页面中 fixed 定位元素会在显示后往上移一段，至于是否会遮挡到中间滚动块还待观察，因此建议在项目允许的情况下，对fixed元素最好用 CSS 做个性化适配)

// 底部安全距离
const IPHONEX_BOTTOM_HEIGHT = 34;

// 可添加到通用UA判断中
function isIphoneX(){
    return /iphone/gi.test(window.navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

if(isIphoneX()){
    $('*').filter(function(index, item){
        return $(item).css('position') === 'fixed';
    }).map(function(index, item){
        var itemTop = $(item).position().top;
        if(itemTop > IPHONEX_BOTTOM_HEIGHT){
            $(item).css('top', itemTop - IPHONEX_BOTTOM_HEIGHT);
        }
    });
}

参考

• http://www.yyyweb.com/5006.html
• https://www.cnblogs.com/zhangruiqi/p/7831019.html
• https://github.com/limbowang/is-iphonex/blob/master/index.js
• https://webkit.org/blog/7929/designing-websites-for-iphone-x/?hmsr=funteas.com&utm_medium=funteas.com&utm_source=funteas.com