使用JS判断不同的终端设备

最新推荐文章于 2022-08-16 09:45:40 发布

转载最新推荐文章于 2022-08-16 09:45:40 发布 · 324 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/goodluck-tang/p/10496311.html

文章标签：

#移动开发

本文介绍了一种通过JavaScript检测用户设备类型的方法，包括微信、Android、iOS、iPhone及特定iPhone刘海屏型号如iPhone X、XS Max和XR。通过判断userAgent字符串和设备像素比，可以准确识别设备并获取刘海屏高度。

const ua: string = window.navigator.userAgent;

const isWeixin: boolean = /MicroMessenger/i.test(ua);
const isAndroid: boolean = /Android/i.test(ua);
const isIOS: boolean = /iP[hone|ad|od] OS/i.test(ua);
const isIphone: boolean = /iPhone/i.test(ua);

// iphoneX iphoneXS 刘海高度 30px
const isIphoneX: boolean = !!(isIphone && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812);

// 刘海高度： 44px
const isIphoneXSMAX: boolean = !!(isIphone && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896);

// 刘海高度 33px
const isIphoneXR: boolean = !!(isIphone && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896);

// iPhoneX版本以上的刘海屏
const isIphoneXup: boolean = isIphoneX && isIphoneXSMAX && isIphoneXR;

export default {
  isWeixin,
  isAndroid,
  isIOS,
  isIphone,
  isIphoneX,
  isIphoneXSMAX,
  isIphoneXR,
  isIphoneXup
}