移动端刘海屏设备识别

移动端设备如何识别当前设备是否为刘海屏，Android 与 iOS 方法如下：

// Android
const u = window.navigator.userAgent;
if (u.indexOf('topBar') != -1) {
  var matchArr = u.match(new RegExp('topBar\\\\/(\\\\S*)\\\\s+')); //取出Android设备UA里的topBar参数
  topBar = matchArr && matchArr[1];
  return true;
}

// iOS
if (new RegExp('iPhone OS').test(u)){
  var sizeList = ['375*812','414*896','390*844','428*926'];
  var size = screen.width + '*' + screen.height;
  return screen.height >= 812 || sizeList.indexOf(size) > -1;
} else {
	return false;    
}

原理是通过 ua ，Android 设备可以直接拿到 ua 中的 topBar 参数，而 iOS 设备会复杂一点，由于 ua 中没有 topBar 这个参数，需要我们通过对设备屏幕尺寸来判断当前设备是否为刘海屏设备，具体可参考下表。

设备分辨率屏幕宽高尺寸dpippi
iPhone4S960 x 640480 x 3202x323
iPhone SE1136 x 640568 x 3202x326
iPhone6/6S/71334 x 750667 x 3752x326
iPhone6/7 plus1920 x 1080960 x 5402x401
iPhone81334 x 750667 x 3752x326
iPhone8 plus1920 x 1080960 x 5402x401
iPhoneX/XS2436 x 1125812 x 3753x458
iPhoneXR1792 x 828896 x 4142x326
iPhone111792 x 828896 x 4143x326
iPhone11 Pro2436 x 1125812 x 3753x458
iPhone11 Pro Max2688 x 1242896 x 4143x458
iPhone12 mini2340 x 1080780 x 3603x476
iPhone12/Pro2532 x 1170844 x 3903x460
iPhone12 Pro Max2778 x 1284926 x 4283x458

Q.E.D.

Take it easy