客户端内嵌H5页面中判断iPhone X、iPhone XS、iPhone XS Max、iPhone XR

在iPhone XS、iPhone XS Max、iPhone XR系列新机未出来之前,我们可以这么来判断iPhone X,进而来做刘海屏的兼容.

/**
 * iPhone X、iPhone XS
 */
export const isIPhoneX = () => {
  return /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
}

同样,在客户端没有对iPhone XS Max的超视网膜屏做特殊兼容的时候,我们这样判断是没有问题的,但是在客户端做了兼容以后,这样的判断就对iPhone XS Max、iPhone XR不好使了(###哭瞎###),所以我们必须添加特殊处理.

/**
 * iPhone XS Max
 */
export const isIPhoneXSMax = () => {
  return /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
}

/**
 * iPhone XR
 */
export const  isIPhoneXR = () => {
  return /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
}

elaninhust / H5Skills

客户端内嵌H5页面中判断iPhone X、iPhone XS、iPhone XS Max、iPhone XR #1