Some system judgments in front-end H5 development

1. Check ios and Android

  isSystem(e) {
    let u = navigator.userAgent
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > 1 // Android terminalif (isAndroid) {
      return 'android'
    }
    return 'ios'
  },
Copy the code

2. Determine the type of wechat browser

  checkPlatform() {
    if(/MicroMessenger/i.test(navigator.userAgent)) {// This is the wechat platform browserreturn 'Messenger'
    }
    if(/android/i.test(navigator.userAgent)) {// This is an Android browserreturn 'Android'
    }
    if(/ iPhone OS /i.test(navigator.userAgent)) {// This is an iOS browserreturn 'iOS'
    }
    if(/Linux/i.test(navigator.userAgent)) {// This is a Linux browserreturn 'Linux'
    }
    if(/Linux/i.test(navigator.platform)) {// This is the Linux operating system platformreturn 'Linux'}},Copy the code

3. Determine the type of black line at the bottom of iPhone: iPhoneX, iPhone XS Max, iPhoneXR, iPhone 11

  isIphoneX() {/ / iPhone, iPhone X XS const isIPhoneX = / iPhone/gi test (window. The navigator. UserAgent) && window. DevicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812 // iPhone XS Max iphone11 Pro const isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896 // iPhone XR iphone11 const  isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 &&  window.screen.width === 414 && window.screen.height === 896if (isIPhoneX || isIPhoneXSMax || isIPhoneXR) return true
    return false
  },
Copy the code