iPhone 刘海屏手机适配

[chenwangji]

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响

由于刘海屏和底部 indicator 的存在，我们的兼容工作就是需要让可操作区域处于安全区域内。

viewport-fit

通过对meta标签viewport的扩展，可以调整页面的展现区域。viewport-fit有三个可选值：

• contain：使页面展示在安全区域内
• cover： 使页面占满屏幕
• auto： 和 contain 选项表现一样

使用方式：

<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"/>

检测是否是 iphone x series

iphone x 系列手机的特点是特别长，所以可以通过这个特点去检测是否是 iphone x series

/**
 * 是否是 iphone x 系列手机
 */
export function isIphonexSeries() {
    if (typeof window !== 'undefined' && window) {
        // 因为浏览器模拟器和真机对横屏下 window.screen.width 表现不一，需兼容
        const screenWidth = Math.max(window.screen.width, window.screen.height)
        return /iphone/gi.test(window.navigator.userAgent) && screenWidth >= 812;
    }
    return false;
}

然后在 body 上增加 iphonx class

import { isIphonexSeries } from '@/utils/common'

export const addIphonexClass = () => {
    const root = document.querySelector('body') as Element
    if (isIphonexSeries()) {
        console.log(root)
        root.classList.add('iphonex')
    }
}

注入

window.onload = () => {
   // 增加 iphonex 标识 class
    addIphonexClass()
}

样式兼容

// iphonex.less

.iphonex {
    // styles
}