jump from wechat into app store

jump

//1. find out which device you are using:
var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return { //移动终端浏览器版本信息 
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 
            iPad: u.indexOf('iPad') > -1, //是否iPad 
        };
    }(),
}
//2. diff device use diff style
if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
   document.getElementsByTagName('div')[0].onclick=function(){
        document.getElementById("popweixin").style.display = "block";
        window.location.href="https://appsto.re/cn/njER6.i";
    }
}else if (browser.versions.android) {
    document.getElementsByTagName('div')[0].onclick=function(){
        window.location.href="http://www.wandoujia.com/apps/com.mlog.weather";
    }
}else{
   window.location.href="http://www.mlogcn.com/app.html";
}
//3. design the popweixin
/*
<div href="#" class="down"></div>
<div id='popweixin'>
    <div class='tip top2bottom animate-delay-1'>
        <img src='masking.png'/>
    </div>
</div>
*/
//4. and the css files
    <style>
    html {
        font-size: 14px;
        width: 100%;
        height: 100%
    }
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        min-width: 320px;
        background-color: rgba(0,0,0,0);
        background-image: url(down.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    @media (max-width: 320px) {
      .down {
        position: absolute;
        top: 18.2em;
        left: 7em;
        width: 9em;
        height: 3.5em;
      }
    }
    @media (min-width: 325px) {
      .down {
        position: absolute;
        top: 22.2em;
        left: 8.5em;
        width: 11em;
        height: 4.2em;
      }
    }
    @media (min-width: 414px) {
      .down {
        position: absolute;
        top: 24.3em;
        left: 9.3em;
        width: 12em;
        height: 4.2em;
      }
    }
#popweixin {
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
    z-index:1000;
    background:rgba(0,0,0,.5);
    top:0;
    left:0;
    display:none;
}
#popweixin .tip {
    width:100%;
    background:rgba(0,0,0,0);
    z-index:1001;
}
#popweixin .tip img{
    width: 100%;
}
.top2bottom {
    -webkit-animation:top2bottom .8s ease;
    -o-animation:top2bottom .8s ease;
    animation:top2bottom .8s ease;
    -webkit-animation-fill-mode:backwards;
    -moz-animation-fill-mode:backwards;
    -o-animation-fill-mode:backwards;
    animation-fill-mode:backwards
}
.animate-delay-1 {
    -webkit-animation-delay:.7s;
    -moz-animation-delay:.7s;
    -o-animation-delay:.7s;
    animation-delay:.7s
}
@-webkit-keyframes top2bottom {
    0% {
    -webkit-transform:translateY(-300px);
    opacity:.6
}
100% {
    -webkit-transform:translateY(0px);
    opacity:1
}
}@keyframes top2bottom {
    0% {
    transform:translateY(-300px);
    opacity:.6
}
100% {
    transform:translateY(0px);
    opacity:1
}
    </style>

can not work on ipad cos the bg is a whole shit.

test the download file by browser-sync:

$browser-sync start --server 

you must install the browser-sync first

npm install -g browser-sync