判斷是不是微信瀏覽器,如果是將彈出遮罩層提示在右上角瀏覽器中打開(一般用於下載東西)


<!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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM