iPhone放大模式详解

背景

在项目中，须要针对iphone的刘海屏幕进行单独的适配，这就须要看如何检测刘海屏幕了。并且，同一款机型，得出来的屏幕分辨率还有可能不一样，下面把处理刘海屏中踩过的坑进行总结。

检测iphone刘海屏

某些状况下，咱们在样式方面须要对iphone的刘海屏机型须要作特殊的处理。目前有三款刘海屏iphone，分别是iphoneX、iphoneXR、iphoneXS max三种。其中三者的分辨率和像素比是不一样的，并且iphoneXR和iphoneXS max两款手机还能够选择放大的显示模式，所以理论上有两种不一样的分辨率。关于显示模式的介绍能够看下面的内容。

具体的分辨率状况以下：

设备	像素比(dpr)	屏幕分辨率	放大模式
iphoneX	3	1125*2436	无
iphoneXs max	3	1242*2688	1125*2436
iphoneXr	2	828 *1792	750*1624

判断逻辑

综上特色，所以须要根据ua中的信息，判断当前手机的平台，以及根据当前获取到的分辨率，推断当前是否为刘海机型。直接贴代码：

// 得到手机平台
OS: (function() {
    const userAgent = navigator.userAgent;
    if (/\bAndroid\b/i.test(userAgent)) {
      return 'Android';
    } else if (
      /\bip[honead]+\b/i.test(userAgent) ||
      /\biOS\b/i.test(userAgent)
    ) {
      return 'IOS';
    }
    return null;
  }()),
  
// 判断机型
let ratio = window.devicePixelRatio || 1;
let screen = {
  width: window.screen.width * ratio,
  height: window.screen.height * ratio
};
const isX = screen.width === 1125 && screen.height === 2436;
const isXSMAX = screen.width === 1242 && screen.height === 2688;
const isXR = (screen.width === 750 && screen.height === 1624 || screen.width === 828 && screen.height === 1792);

// 那么判断是不是刘海屏
const isIOS = this.OS === 'IOS';
return isIOS && (isX || isXSMAX || isXR);
复制代码

为何放大模式须要单独适配

iphone的放大模式原理是使用较低以及的逻辑分辨率渲染，而后拉伸显示到屏幕上。

例如新机推出时，若是有新的分辨率时，有一种比较简单的适配就是适配以前相同比例下面的小屏，例如plus机型适配到同数字的机型，max机型适配到X机型等等。

iPhone的16:9的屏幕的逻辑分辨率，一共有三种：320×480，375×667，414×736，分别对应4''，4.7''，5.5''的屏幕。 对于4.7''和5.5''的屏幕来讲，更低一级的逻辑分辨率分别是320×480和375×667。同时，只要App适配这两个分辨率（固然是适配的），那么不须要作任何修改，就能够直接运行。好了，为何iPhone X没有放大模式呢？由于iPhone X没有现成的更低一级的逻辑分辨率，若是强行加上，那么几乎所有App都要针对一个新的、只有在iPhone X的放大模式下才会出现的逻辑分辨率进行适配，这个成本实在是太大了。固然，iPhone XS Max上是有放大模式的，由于iPhone X的逻辑分辨率，就是iPhone XS Max放大模式下的逻辑分辨率，一样不须要针对性适配。