Case 1: Determine the type of mobile terminal. Scanning the QR code link on WeChat can distinguish Huawei (Honor), Android, and Apple phones. Huawei and Honor will jump to the Huawei App Store, Android will prompt the browser to open, and Apple will jump to the Apple Store.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Investment and Education Base Mobile Terminal Information</title>
<style>
body {<!-- -->
margin: 0; /* Remove the default margins from the page */
padding: 0; /* Remove the default padding from the page */
background-image: url('./bg.jpg'); /* Set the URL of the background image */
background-size: cover; /* The background image covers the entire page */
background-repeat: no-repeat; /* The background image does not repeat */
background-color: #ff5b5b;
}
#user_agent{<!-- -->
float:right;
}
</style>
</head>
<body>
<div id="user_agent"><img decoding="async" src="./open.png" alt="Please open it in the browser in the upper right corner" ></div>
<script type="text/javascript">
var user_agent = window.document.getElementById("user_agent");
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 & amp; & amp; u.indexOf('KHTML') == -1, //Firefox kernel
mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER |LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //Whether it is 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 || u.indexOf('Mac') > -1, //Whether it is iPhone or QQHD browser
iPad: u.indexOf('iPad') > -1, //Whether it is iPad
HUAWEI: u.indexOf('HUAWEI') > -1 || u.indexOf('HarmonyOS') > -1|| u.indexOf('HONOR') > -1, //Whether it is huawei
XIAOMI: u.indexOf('MI') > -1 || u.indexOf('redmi') > -1, //Is it Xiaomi
webApp: u.indexOf('Safari') == -1 //Whether the web should be a program without header and bottom
};
} (),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {<!-- -->//Apple version
window.location.href = "https://itunes.apple.com/cn/app/id1628504846?mt=8";
}
if (browser.versions.android) {<!-- -->//Android and Huawei
if (browser.versions.HUAWEI) {<!-- -->//Huawei
window.location.href = "https://url.cloud.huawei.com/nonmWB0rew";
//is_weixn();//WeChat does not automatically jump to the browser
}else{
window.location.href = "https://tjjd-common-1304488676.cos.ap-beijing.myqcloud.com/download/Android/app-tjjd.apk";
}
}
is_weixn();
// Is it WeChat?
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)!="micromessenger" ) {
//Non-WeChat hidden prompts
user_agent.style.display = "none";
} else {
//alert('Please open the download in the browser in the upper right corner');
//user_agent.innerHTML = 'Please open the download in the browser in the upper right corner';
//user_agent.style.display = "block";//Xiaomi phone is invalid
}
}
</script>
</body>
</html>
Case 2: View device information, test with window.navigator object:
<!DOCTYPE html>
<html lang="zh-CN" version="4">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>window.navigator object test:</h1>
Mobile phone<p id="user_agent"></p>
<script>
document.write("Returns the internal name (development code name) of the current browser navigator.appCodeName: " + navigator.appCodeName + "<br>");
document.write("Returns to obtain the minor version number of the browser, which is commonly used in browser patch service packages. navigator.appMinorVersion: " + navigator.appMinorVersion + "<br>");
document.write("returns the official name of the browser navigator.appName: " + navigator.appName + "<br>");
document.write("returns the browser's platform and version information navigator.appVersion: " + navigator.appVersion + "<br>");
document.write("returns whether the browser enables cookies, returns true if enabled, false if disabled, navigator.cookieEnabled: " + navigator.cookieEnabled + "<br>");
document.write("Returns whether the browser is connected to the Internet. If it is connected, it returns true. If it is disconnected, it returns false. navigator.onLine: " + navigator.onLine + "<br>");
document.write("Returns the operating system platform navigator.platform the browser is running on: " + navigator.platform + "<br>");
document.write("Returns the manufacturer and version information of the browser, that is, the operating system the browser is running on, the version of the browser, and the name navigator.userAgent: " + navigator.userAgent + "<br>");
document.write("Returns whether the browser supports running Java Applet applet. If it supports, it returns true, if it does not, it returns false. navigator.javaEnabled(): " + navigator.javaEnabled() + "<br>");
document.write("Returns to get the language of the current browser. For example, a possible result is "zh-CN" navigator.language: " + navigator.language + "<br>");
document.write("Returns to obtain the CPU model of the computer system. For example, Inter usually results in x86. navigator.cpuClass: " + navigator.cpuClass + "<br>");
document.write("Returns to get the default language used by the OS. navigator.systemLanguage: " + navigator.systemLanguage + "<br>");
document.write("returns an array of all MIME types supported by the browser. navigator.mimeTypes: " + navigator.mimeTypes + "<br>");
document.write("Get the array navigator.plugins of all plug-ins installed on the browser:" + navigator.plugins + "<br>");
document.write("Get the product name of the browser, for example, the possible result is Gecko.navigator.product:" + navigator.product + "<br>");
document.write("Return Get more information about the browser product, for example, the possible result is 20030107. navigator.productSub: " + navigator.productSub + "<br>");
document.write("Get the browser vendor name, for example, the possible result is Google Inc. navigator.vendor:" + navigator.vendor + "<br>");
document.write("Get more information about the browser vendor navigator.vendorSub:" + navigator.vendorSub + "<br>");
var user_agent = window.document.getElementById("user_agent");
var u = navigator.userAgent;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;//android terminal
var isIOS = !!u.match(/\(i[^;] + ;( U;)? CPU. + Mac OS X/); //ios terminal
//android side
if (isAndroid) {
let hidden =
window.document.hidden ||
window.document.mozHidden ||
window.document.msHidden ||
window.document.webkitHidden;
if (typeof hidden == "undefined" || hidden == false) {
//window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=fundtown.toujiao"; //Android application market address
user_agent.innerHTML = 'Android';
}
} else if (isIOS) {
//ios side
let hidden =
window.document.hidden ||
window.document.mozHidden ||
window.document.msHidden ||
window.document.webkitHidden;
if (typeof hidden == "undefined" || hidden == false) {
window.location.href = "https://itunes.apple.com/cn/app/id1628504846?mt=8"; //app store address
user_agent.innerHTML = 'Apple';
}
}
</script>
</body>
</html>
Case 3: JS jumps to various mobile application malls
<script type="text/javascript">
//js jump to each mobile application mall
//1. Is it a built-in browser?
function is_neizhi() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return "weixin";
} else if (ua.match(/QQ/i) == "qq") {
return "QQ";
} else if (ua.match(/Alipay/i) == "alipay" & amp; & amp; payway == 2) {
return "alipay";
}
return false;
}
//2. Determine the mobile phone brand
function verifyBrand() {
const userAgent = navigator.userAgent.toLowerCase()
const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
const isHuawei = userAgent.match(/huawei/i);
const isHonor = userAgent.match(/honor/i);
const isOppo = userAgent.match(/oppo/i);
const isOppoR15 = userAgent.match(/PACM00/i);
const isVivo = userAgent.match(/vivo/i);
const isXiaomi = userAgent.match(/mi\s/i);
const isXIAOMI = userAgent.match(/xiaomi/i);
const isXiaomi2s = userAgent.match(/mix\s/i);
const isRedmi = userAgent.match(/redmi/i);
const isSamsung = userAgent.match(/sm-/i);
const isSamsung2 = userAgent.match(/samsung/i);
if (isIphone) {
return 'iphone'
} else if (isHuawei || isHonor) {
return 'huawei';
} else if (isOppo || isOppoR15) {
return 'oppo';
} else if (isVivo) {
return 'vivo';
} else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
return 'xiaomi';
} else if (isSamsung || isSamsung2) {
return 'samsung';
} else {
return 'other'
}
}
//3. The main method of jumping to download. If it is a built-in browser, you need to jump to the browser that comes with the phone to use it.
function goDownload() {
if (is_neizhi()){
//Built-in browser
alert('Please open it with your own browser')
return;
}
const iosLinkUrl = "https://itunes.apple.com/cn/app/id1628504846?mt=8";//Apple
const androidLinkurl ="https://tjjd-common-1304488676.cos.ap-beijing.myqcloud.com/download/Android/app-tjjd.apk";//Android others
const huaweiUrl = 'appmarket://details?id=fundtown.toujiao';//Huawei
const oppoUrl = "oppomarket://details?packagename=fundtown.toujiao";//oppo
const vivoUrl = "vivomarket://details?id=fundtown.toujiao";//vivo
const xiaomiUrl = 'mimarket://details?id=fundtown.toujiao';//Xiaomi
const samsungUrl = 'samsungapps://ProductDetail/fundtown.toujiao';//Samsung
//The following are not used
const qqChal="tmast://appdetails?pname=fundtown.toujiao"; // App treasure direct download
const baiduChal="http://market.android.com/details?id=<PackageName>"; // Baidu Sogou web page
const jinliChal="http://m.appgionee.com/marketdetail?id=<PackageName>"; // Jinli web page
const lenovoChal="http://market.lenovomm.com/details?id=<PackageName>"; // Lenovo
const anzhiChal="anzhimarket://details?id=<PackageName>"; // Anzhi Market
const meizuChal="mstore://details?package_name=<PackageName>"; // Meizu
switch (this.verifyBrand()) {
case 'iphone':
window.location.href=iosLinkUrl;
break;
case 'xiaomi':
window.location.href=xiaomiUrl;
break;
case 'huawei':
window.location.href=huaweiUrl;
break;
case 'vivo':
window.location.href=vivoUrl;
break;
case 'oppo':
window.location.href=oppoUrl;
break;
case 'samsung':
window.location.href=samsungUrl;
break;
default:
window.location.href=androidLinkurl;
break;
}
}
goDownload()
</script>
Determine whether the APP (sms for example) has been installed, install it and open it, otherwise download it.
var u = navigator.userAgent;
var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // Within WeChat
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android terminal
var isIOS = !!u.match(/\(i[^;] + ;( U;)? CPU. + Mac OS X/); //ios terminal
//In WeChat
if(isWeixin) {
alert('Please open on browser')
} else {
//android side
if (isAndroid) {
//scheme protocol for Android app
window.location.href = 'sms://';
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
//download
window.location.href ="https://xxxx";
}
}, 2000);
}
//ios side
if (isIOS) {
//ios scheme protocol
window.location.href = 'sms://'
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
//App store download address
window.location.href = "http://itunes.apple.com/app/xx";
}
}, 2000);
}
}