Js to determine the client is iOS or Android and other mobile terminal method

  • 2020-03-30 00:49:16
  • OfStack

Principle of judgment:

JavaScript is the main front-end development language, we can write JavaScript programs to determine the type and version of the browser. There are generally two ways for JavaScript to determine the type of browser, one is by the attributes that are unique to various browsers, and the other is by analyzing the browser's userAgent properties. In many cases, once the values have determined the browser type, a browser version needs to be determined to address the compatibility issue, which is generally only known by analyzing the browser's userAgent.

Browser type

• browser specific attributes
According to the userAgent [2]
Browser version
(1) based on userAgent

For mobile browser judgment

1. How to determine whether to use regular match for mobile terminals,
Match navigator. UserAgent contains the string AppleWebKit*****Mobile
Android qq browser HD version only AppleWebKit

2. Judgment of mobile phone language version
Use the navigator. BrowserLanguage can be concluded that Windows phone language versions,
Of course, there are differences in compatibility between the nasty little mobile language version, which is compatible with Mozilla, and the AppleWebKit kernel's browser access language version, which lists navigator.language
CODE:
 
<script type="text/javascript"> 
var browser={ 
versions:function(){ 
var u = navigator.userAgent, app = navigator.appVersion; 
return { //Mobile terminal browser version information
trident: u.indexOf('Trident') > -1, //IE kernel
presto: u.indexOf('Presto') > -1, //Opera kernel
webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google kernel
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //Firefox kernel
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //Is it a mobile terminal
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //Ios terminal
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //Android terminal or uc browser
iPhone: u.indexOf('iPhone') > -1 , //Whether for iPhone or QQHD browser
iPad: u.indexOf('iPad') > -1, //Whether or not the
webApp: u.indexOf('Safari') == -1 //Whether the web should be a program without a header and a bottom
}; 
}(), 
language:(navigator.browserLanguage || navigator.language).toLowerCase() 
} 
document.writeln(" Language version : "+browser.language); 
document.writeln("  Is it a mobile terminal : "+browser.versions.mobile); 
document.writeln(" ios terminal : "+browser.versions.ios); 
document.writeln(" android terminal : "+browser.versions.android); 
document.writeln("  Whether it is iPhone: "+browser.versions.iPhone); 
document.writeln("  Whether or not iPad: "+browser.versions.iPad); 
document.writeln(navigator.userAgent); 
</script> 

Something special
UC browser has no android header, only return: Linux, here roughly judged according to Linux android (the premise must satisfy the mobile terminal, UC is satisfied)
Android QQ browser HD test results: MAC, Safari

Related articles: