判断是不是微信浏览器，如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)
Posted 夏小夏吖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了判断是不是微信浏览器，如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="聚贤堂,聚贤堂官网,聚闲堂,聚闲堂官网,聚贤堂跑胡子,聚闲堂跑胡子,聚贤堂游戏,聚闲堂游戏,跑胡子,字牌"> <meta name="description" content="聚闲堂跑胡子是针对湖南地区的地方性棋牌游戏，亦称“字牌”、“纸牌”，在我国某些地区也叫“跑胡纸”、“跑和字”、“二七十”、“煨胡子”、“棍棍”、“大贰”等。"> <title>聚闲堂跑胡子</title> <!-- Bootstrap --> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <style type="text/css"> /*核心css*/ .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;} .wxtip-icon{width: 52px; height: 67px; background: url(http://img.caibaojian.com/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;} .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;} </style> <!-- top --> <header> <div class="container"> <div class="media"> <img class="img-responsive col-sm-2 col-xs-4" src="assets/img/IMG_0561.jpg"> <div class="col-sm-10 hidden-xs"> <p>应用名称：聚闲堂跑胡子</p> <ul class="list-unstyled"> <li class="col-sm-4">应用大小：15.71MB</li> <li class="col-sm-4">版本：1.0.1</li> <li class="col-sm-4"></li> </ul> <p>系统支持：ios 8.0以上，android 2.2.x以上</p> </div> <div class="col-sm-10 visible-xs"> <ul class="list-unstyled"> <li class="col-sm-4">应用名称：聚闲堂跑胡子</li> <li class="col-sm-4">应用大小：15.71MB</li> <li class="col-sm-4">版本：1.0.1</li> <li class="col-sm-4">系统支持：IOS 8.0以上，Android 2.2.x以上</li> </ul> </div> </div> </div> </header> <!-- 游戏介绍 --> <div class="xx_intorduce"> <div class="container"> <div class="col-sm-6 col-xs-12"> <img class="img-responsive" src="assets/img/gameIntro.png"> <div class="xx_intrtext"> <p>《聚闲堂跑胡子》是一款手机棋牌类扑克牌、麻将类型游戏，内有乐山二七十、常德跑胡子、红黑点、碰胡子、桂林字牌、郴州毛胡子等多种玩法，画面精美，玩法正宗，更安全，更省流量。灵活的出牌规则，再加上丰富的玩法，使得虽然每一局的时间简短，但却又不失乐趣。</p> <!-- <p>应用名称：聚闲堂跑胡子 </p> <p>应用大小：15.71M</p> <p>系统支持：IOS 8.0以上，Android 2.2.x以上</p> --> <p>分类：棋牌游戏</p> <p>语言：简体中文</p> <p>更新时间：2016-12-31</p> <!-- <p>版本：1.0.1</p> --> </div> </div> <div class="col-sm-6 col-xs-12"> <img class="img-responsive" src="assets/img/gameFig.png"> <div class="xx_intrtext"> <p>【超丰富的竞技玩法】</br>全天候随时和伙伴竞技PK！看谁技高一筹，能笑到最后！</p> <p>【超贴近的游戏交互】</br>语音实时对讲，沟通就像面对面！</p> <p>【高品质的游戏体验】</br>超精美场景化的游戏界面，感受纯正的家乡味道！</p> <p>【超纯正的经典玩法】</br>体验最地道的家乡玩法，好友同玩千里约战，随时随地组牌局！</p> </div> </div> </div> </div> <!-- 下载 --> <div align="center" class="container xx_donwload"> <a id="JdownApp"><img class="img-responsive" src="assets/img/download_btn.png"></a> </div> <!-- footer --> <!-- <footer> <p> Copyright ? 2016 聚闲堂游戏 京ICP备17006628号 | 京ICP证17006628号 </p> </footer> --> <!-- 开始写代码 --> <!-- jQuery (necessary for Bootstrap‘s javascript plugins) --> <script src="assets/js/jquery-3.1.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="assets/js/bootstrap.min.js"></script> <script type="text/javascript"> function doDownload(ele){ ele.onclick=function(e){ // 获取终端的相关信息 var Terminal = { // 辨别移动终端类型 platform : function(){ var u = navigator.userAgent, app = navigator.appVersion; return { // android终端或者uc浏览器 android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, // 是否为iPhone或者QQHD浏览器 iPhone: u.indexOf(‘iPhone‘) > -1 , // 是否iPad iPad: u.indexOf(‘iPad‘) > -1 }; }(), // 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp... language : (navigator.browserLanguage || navigator.language).toLowerCase() } // 根据不同的终端，跳转到不同的地址 var theUrl = ‘http://www.jxtgzh.com/juxiantangphz.apk‘; if(Terminal.platform.android){ theUrl = ‘http://www.jxtgzh.com/juxiantangphz.apk‘; }else if(Terminal.platform.iPhone){ theUrl = ‘https://itunes.apple.com/cn/app/jie-zou-da-shi/id1196806285?mt=8‘; }else if(Terminal.platform.iPad){ theUrl = ‘https://itunes.apple.com/cn/app/jie-zou-da-shi/id1196806285?mt=8‘; } location.href = theUrl; } } doDownload(document.getElementById(‘JdownApp‘)); </script> </body> </html> <script type="text/javascript"> function is_weixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } } var isWeixin = is_weixin(); var winHeight = typeof window.innerHeight != ‘undefined‘ ? window.innerHeight : document.documentElement.clientHeight; function loadHtml(){ var div = document.createElement(‘div‘); div.id = ‘weixin-tip‘; div.innerHTML = ‘<p><img src="assets/img/live_weixin.png" width="100%" alt="微信打开"/></p>‘; document.body.appendChild(div); } function loadStyleText(cssText) { var style = document.createElement(‘style‘); style.rel = ‘stylesheet‘; style.type = ‘text/css‘; try { style.appendChild(document.createTextNode(cssText)); } catch (e) { style.styleSheet.cssText = cssText; //ie9以下 } var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式 head.appendChild(style); } var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}"; if(isWeixin){ loadHtml(); loadStyleText(cssText); } </script>
以上是关于判断是不是微信浏览器，如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)的主要内容，如果未能解决你的问题，请参考以下文章