不罗嗦直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>Document</title> <script src="./jquery-3.2.1/jquery-3.2.1.min.js"></script> </head> <body> <div class="box"> <img id="btn" src="./images/750-1280.jpg"></img> </div> <style> html,body,.box{ margin: 0; padding: 0; width: 100%; height: 100%; } img{ width: 100%; height: 100%; } </style> <script> function detectVersion() { let isAndroid,isIOS,isIOS9,version, u = navigator.userAgent, ua = u.toLowerCase(); if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //android终端或者uc浏览器 //Android系统 isAndroid = true } if(ua.indexOf("like mac os x") > 0){ //ios var regStr_saf = /os [d._]*/gi ; var verinfo = ua.match(regStr_saf) ; version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,"."); } var version_str = version+""; if(version_str != "undefined" && version_str.length >0){ version = parseInt(version) if(version>=8){ // ios9以上 isIOS9 = true }else{ isIOS = true } } return {isAndroid,isIOS,isIOS9} } // 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback function openApp(url,callback) { stopDefault() let {isAndroid,isIOS,isIOS9} = detectVersion() if(isAndroid || isIOS){ var timeout, t = 4000, hasApp = true; var openScript = setTimeout(function () { if (!hasApp) { callback && callback() } document.body.removeChild(ifr); }, 5000) var t1 = Date.now(); var ifr = document.createElement("iframe"); ifr.setAttribute('src', url); ifr.setAttribute('style', 'display:none'); document.body.appendChild(ifr); timeout = setTimeout(function () { var t2 = Date.now(); if (t2 - t1 < t + 100) { hasApp = false; } }, t); } if(isIOS9){ // window.location.href = url; setTimeout(function() { callback && callback() }, 1000); setTimeout(function() { location.reload(); }, 2000); } } //跳转h5网站 function goConfirmAddr(){ window.location.href = 'https://m.tb.cn/h.3Fe5mRA?sm=6f43f6' stopDefault() } function stopDefault(e) { if (e && e.preventDefault) { e.preventDefault();//防止浏览器默认行为(W3C) } else { window.event.returnValue = false;//IE中阻止浏览器行为 } return false; } //配置对应图片大小 function getWidthAndHeight(){ console.log(window.innerHeight + "，" +window.innerWidth+','+window.screen.height); var num = window.innerWidth/window.innerHeight; let {isAndroid,isIOS,isIOS9} = detectVersion() if(isAndroid) { $('#btn').attr("src","./images/1080-1601.jpg"); }else{ switch(window.screen.height){ case 736: $('#btn').attr("src","./images/720-1062.jpg"); break; case 667: $('#btn').attr("src","./images/1080-1844.jpg"); break; case 568: $('#btn').attr("src","./images/750-1280.jpg"); break; case 812: $('#btn').attr("src","./images/1080-1844.jpg"); break; default: $('#btn').attr("src","./images/1242-1786.jpg"); } } } window.onload = function(){ getWidthAndHeight() //3秒内点击多次只执行一次 var checkClick = false; $('#btn').click(function() { if(checkClick === true) { return false } openApp("taobao://m.tb.cn/h.3Fe5mRA?sm=6f43f6",goConfirmAddr) checkClick = true; setTimeout(function(){ checkClick = false },3000) }); } </script> </body> </html>