微信内和qq跳转手机自带浏览器下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    name="viewport">

</head>
<style>
body{
   margin:0;
   width: 0;

//背景图
   background: url('__PUBLIC__/images/live_weixin.jpg');
   height:100%;
   width:100%;
   background-size: 100% 100%;
   position: relative;
}

.content{
width: 100%;
   display: flex;
   justify-content: space-between;
   position: absolute;
   top: 59vh;

}
.content>div{
   width: 50%;
   display: flex;
   justify-content: center;

}
.content>div:nth-of-type(1) a{
   text-decoration: none;
   display: flex;
   width: 120px;
   height: 45px;
   justify-content: center;
   align-items: center;
   font-size: 15px;
   font-weight: bold;
   color: #fff;
   border-radius: 10px;
   background: -moz-linear-gradient(top, #FA631B 0%, #F92927 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA631B), color-stop(100%,#F92927));
   background: -webkit-linear-gradient(top, #FA631B 0%,#F92927 100%);
   background: -o-linear-gradient(top, #FA631B 0%,#F92927 100%);
   background: -ms-linear-gradient(top, #FA631B 0%,#F92927 100%);
   background: linear-gradient(to bottom, #FA631B 0%,#F92927 100%);
}
.content>div:nth-of-type(2) a{
   text-decoration: none;
   display: flex;
   width: 120px;
   height: 45px;
   justify-content: center;
   align-items: center;
   font-size: 15px;
   font-weight: bold;
   color: #fff;
   border-radius: 10px;
   background: -moz-linear-gradient(top, #FDAB22 0%, #F8681D 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDAB22), color-stop(100%,#F8681D));
   background: -webkit-linear-gradient(top, #FDAB22 0%,#F8681D 100%);
   background: -o-linear-gradient(top, #FDAB22 0%,#F8681D 100%);
   background: -ms-linear-gradient(top, #FDAB22 0%,#F8681D 100%);
   background: linear-gradient(to bottom, #FDAB22 0%,#F8681D 100%);
}

#weixin-tip p img{width: 100% !important; height: auto;}

</style>
<body>


   <div class="content">
       <div>
           <a href="https://pb114.cn/r4N3">ios版本下载</a>
       </div>
       <div>
           <a href="__PUBLIC__/app/app-release.apk">安卓版本下载</a>
       </div>
   </div>
   <script src="__PUBLIC__/js/jquery.js">   </script>
<script type="text/javascript">
   
       function is_weixin() {
       var ua = navigator.userAgent.toLowerCase();
       if (ua.match(/MicroMessenger/i) == "micromessenger"||ua.match(/QQ/i) == "qq") {
       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';

//live_weixin.png头部指向跳转图片（图1）
           div.innerHTML = '<p><img src="__PUBLIC__/images/live_weixin.png" 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.5); 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>
</body>
</html>

微信内和qq跳转手机自带浏览器下载（图1）

微信内和qq跳转手机自带浏览器下载

相关推荐