JavaScript 判断 iPhone X Series 机型

红太狼 2021-09-18 08:54 274阅读 0赞

原文链接：[JavaScript 判断 iPhone X Series 机型][JavaScript _ iPhone X Series]

## 写在前面 ##

如果有更优雅的方式，一定要告诉我！

## 现状 ##

iPhone X 底部是需要预留 34px 的安全距离，需要在代码中进行兼容。

现状对于 iPhone X 的判断基本是这样的：

// h5
    export const isIphonex = () => /iphone/gi.test(navigator.userAgent) && window.screen && (window.screen.height === 812 && window.screen.width === 375);
    复制代码复制代码

这在之前是没问题的，新的 iPhone X Series 设备发布之后，这个就会兼容就有问题。

## iPhone X Series 参数 ##

<table> 
 <thead> 
  <tr> 
   <th style="text-align:left;">机型</th> 
   <th style="text-align:left;">倍率</th> 
   <th style="text-align:left;">分辨率</th> 
   <th style="text-align:left;">pt</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:left;">iPhone X</td> 
   <td style="text-align:left;">3</td> 
   <td style="text-align:left;">2436 × 1125</td> 
   <td style="text-align:left;">812 × 375</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">iPhone XS</td> 
   <td style="text-align:left;">3</td> 
   <td style="text-align:left;">2436 × 1125</td> 
   <td style="text-align:left;">812 × 375</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">iPhone XS Max</td> 
   <td style="text-align:left;">3</td> 
   <td style="text-align:left;">2688 × 1242</td> 
   <td style="text-align:left;">896 × 414</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;">iPhone XR</td> 
   <td style="text-align:left;">2</td> 
   <td style="text-align:left;">1792 × 828</td> 
   <td style="text-align:left;">896 × 414</td> 
  </tr> 
 </tbody> 
</table>

width === 375 && height === 812 只能识别出 iPhone X 和 iPhone XS，对于 iPhone XS Max 和 iPhone XR 就无能为力了。

## 解决方法 ##

### 对每个机型进行判断 ###

### 统一处理方法 ###

因为现在 iPhone 在 iPhone X 之后的机型都需要适配，所以可以对 X 以后的机型统一处理，我们可以认为这系列手机的特征是 `ios` \+ `长脸`。

在 H5 上可以简单处理。

const isIphonex = () => {
      if (typeof window !== 'undefined' && window) {
        return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
      }
      return false;
    };
    复制代码复制代码

### 媒体查询 ###

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    }
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    }
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    }
    复制代码复制代码

媒体查询无法识别是不是 iOS，还得加一层 JS 判断，否则可能会误判一些安卓机。

[JavaScript _ iPhone X Series]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Faxuebin%2Farticles%2Fissues%2F28