Front end access to mobile phone and device types

Time:2021-5-2

Last   The client information of the front-end browser. After the browser information is available, the following are the detailed types of mobile phones

Although it’s not difficult, it’s easy to record it for subsequent anencephalic replication

Apple App types

   // iOS
   isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
   isIPod = (userAgent: string) => /ipod/i.test(userAgent);
   isIPad = (userAgent: string) => /iPad/i.test(userAgent);
   public isIOS = (userAgent: string) => this.isIPhone(userAgent) || this.isIPod(userAgent) || this.isIPad(userAgent);

Note: the latest version of iPad Pro is MAC system. It is impossible to distinguish iPad pro and MAC by browser information. Detailed browser information:

  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15 

Many BUG make complaints about Apple: https://developer.apple.com/forums/thread/119186

So unless Apple fixes this design problem, we’ll have to make a detour.

At present, the way to distinguish iPad pro from Mac is to judge whether the device supports touch

  isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;

PS: if it’s server-side rendering, navigator can’t get it, so iPad Pro can’t be distinguished. Give up treatment~

Reference link:

https://stackoverflow.com/questions/57776001/how-to-detect-ipad-pro-as-ipad-using-javascript

https://stackoverflow.com/questions/57765958/how-to-detect-ipad-and-ipad-os-version-in-ios-13-and-up

Android type

Most Android browser information has Android fields

   // android
   public isAndroid = (userAgent: string) => /android/i.test(userAgent);

Wechat browser

//Wechat
   public isWechat = (userAgent: string) => /micromessenger/i.test(userAgent);
   public isAppWechat = (userAgent: string) => this.isWechat(userAgent) && !/windowswechat/i.test(userAgent);

Is it a mobile terminal

Add mobile as a supplement, of course, the direct use of mobile is not a big problem

//Mobile phone
   public isMobile = (userAgent: string) => this.isAndroid(userAgent) || this.isIOS(userAgent) || /mobile/i.test(userAgent);

For the field introduction of user agent, please refer to the explanation of the common user agent fields in other blog browsers

Complete code (can be copied directly, thank you)

Front end access to mobile phone and device typesFront end access to mobile phone and device types

declare type UserAgentProvider = {
   isIOS: (userAgent: string) => void;
   isAndroid: (userAgent: string) => void;
   isMobile: (userAgent: string) => void;
   isWechat: (userAgent: string) => void;
 };
 
 class Index implements UserAgentProvider {
   // iOS
   isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
   isIPod = (userAgent: string) => /ipod/i.test(userAgent);
   isIPad = (userAgent: string) => /iPad/i.test(userAgent) || /Macintosh/i.test(userAgent);
   isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;
   public isIOS = (userAgent: string) =>
     this.isIPhone(userAgent) ||
     this.isIPod(userAgent) ||
     this.isIPad(userAgent)||
     this.isIPadPro(userAgent);
 
   // android
   public isAndroid = (userAgent: string) => /android/i.test(userAgent);
 
   //Mobile phone
   public isMobile = (userAgent: string) => this.isAndroid(userAgent) || this.isIOS(userAgent) || /mobile/i.test(userAgent);
 
   //Wechat
   public isWechat = (userAgent: string) => /micromessenger/i.test(userAgent);
   public isAppWechat = (userAgent: string) => this.isWechat(userAgent) && !/windowswechat/i.test(userAgent);
 }
 
 export default new Index();

View Code

 

Keywords: iPad Pro MAC useragent, distinguish iPad pro from Mac

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]