ios刘海屏适配

女爷i 2021-09-07 17:36 713阅读 0赞

现在ios的iphoneX、iphone11、iphone12都具有刘海屏的设计，这部分刘海屏机型和没有刘海屏的在页面显示上有一些差别。所以要做一下区分。

下面是ios主流机型的分辨率信息。

![e8dacda331a94ddc4dc901aa0c5c657c.png][]

注意到在逻辑像素一项，iphoneX以上机型（包括iphone11、iphone12）逻辑像素高度 pt都大于等于812

所以默认逻辑像素高度 p大于等于812的就是iphoneX以上机型，而且这些机型都有刘海屏

// 是否iOS刘海屏
      isIosLiuhai() {
        // 默认物理高度大于812即为iphoneX以上有刘海屏的机型，包括 iphone11 和 iphone12
        // 各机型分辨率大小参考 https://www.jianshu.com/p/812eda65a70f
        if (/iphone/gi.test(window.navigator.userAgent) &&window.screen.height >= 812) {
          return true;
        } else {
          return false;
        }
      }

如果以后iphone升级了，iphone13没有刘海屏，怎么处理。只能针对具体机型通过分辨率信息来区分。以iphoneX为例

isIosLiuhai() {
        let isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
        let isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
        let isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
    
        if (isIPhoneX || isIPhoneXSMax || isIPhoneXR) {
          return true;
        } else {
          return false;
        }
      }

[e8dacda331a94ddc4dc901aa0c5c657c.png]: /images/20210813/8f9a2b84ec9c4d74bf5e4bdeb77b034b.png