javascript - H5页面 怎么判断当前iphone设备的具体型号，想区分是否是带灵动岛14pro及以上的机型？

Question

H5页面 怎么判断当前iphone设备的具体型号，想区分是否是带灵动岛14pro及以上的机型？
现在可以判断出是否是iphone 设备，但无法判断是否是14pro 以上的机型？想区分是否是带灵动岛14pro及以上的机型？应该怎么写？

function isiPhone() {
    // 检查是否为iOS设备
    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

    // 检查是否为iPhone
    const isiPhone = isIOS && /iPhone/i.test(navigator.userAgent);


    return isiPhone;
}

Answer 1

如果是怕被 灵动岛 遮挡的话，可以使用 env() 来获取安全区信息给不同的机型做适配。
�� 移动端安全区域适配方案 - 南玖的前端blog

如果是单独想给灵动岛设备做一些特殊的业务处理，想用 navigator.userAgent 来获取设备信息就不行了，我这边看有灵动岛机型的 user-agent 信息是没看到有可以识别的特殊标识符。用 iOS 版本来判断是不合适的。
社区里面实现都是通过 user-agent 搭配 devicePixelRatio 和 屏幕分辨率来判断不同的 iPhone 机型。当然这样也很麻烦。

Answer 2

我在你原来的基础上重新写了个isIPhone14ProOrAbove方法

function isiPhone() {
    // 检查是否为iOS设备
    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

    // 检查是否为iPhone
    const isiPhone = isIOS && /iPhone/i.test(navigator.userAgent);

    return isiPhone;
}

function isIPhone14ProOrAbove() {
    if (!isiPhone()) {
        return false;
    }

    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
    const devicePixelRatio = window.devicePixelRatio;

    // 检查是否为灵动岛特征
    const hasDynamicIsland = screenWidth >= 430 && screenHeight >= 932 && devicePixelRatio >= 3;

    return hasDynamicIsland;
}

if (isIPhone14ProOrAbove()) {
    console.log('This is an iPhone 14 Pro or above with Dynamic Island.');
} else {
    console.log('This is not an iPhone 14 Pro or above.');
}