ios刘海屏适配

最新推荐文章于 2023-10-20 12:17:35 发布

飞歌Fly

最新推荐文章于 2023-10-20 12:17:35 发布

阅读量1.5k

点赞数

分类专栏： css样式 vue

本文链接：https://blog.csdn.net/qq_35430000/article/details/116711647

版权

vue 同时被 2 个专栏收录

84 篇文章

订阅专栏

css样式

16 篇文章

订阅专栏

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

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

注意到在逻辑像素一项，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;
    }
  }