APP安卓苹果ios微信二合一自动判断下载按钮-html代码-BFW代码库

APP安卓苹果ios微信二合一自动判断下载按钮

代码语言：html

代码描述：html实现APP安卓ios微信二合一下载按钮，自动判断ios还是andriod还是微信，如果是ios点击后自动跳转到设定链接，如果是andriod，在微信中打开就会弹出提示层打开浏览器后下载设定apk地址

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html实现APP安卓ios微信二合一下载按钮</title>

    <meta
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    name="viewport" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: white;

        }
        .gradient_top {
            margin-top: 60vh;
            width: 100%;
            height: 40vh;
            position: relative;
            z-index: 2;
            overflow: hidden;

        }
        .gradient_top::after {

            content: '';
            width: 150%;
            height: 40vh;
            margin-left: -25vw;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            border-radius: 60% 60% 0 0;
            background: linear-gradient(160deg,#1496f1, #E0F0FA);

        }
        .appimg {
            padding-top: 10vh;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            text-align: center;
        }
        .downarea {
            position: absolute;
            bottom: 10vh;
            z-index: 3;
            width: 100%;
            text-align: center;
        }
        .downbtn {
            padding: 10px 25px;
            border: 1px solid #1496f1;
            background: white;
            border-radius: 20px;


        }
        .wxtip {
            background: rgba(0,0,0,0.8);
            padding: 30px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 998;
            display: none;


        }
    </style>
</head>
<body>
    <div class="gradient_top">

    </div>
    <div class="appimg">
        <img style="width:50%;" src='http://repo.bfw.wiki/bfwrepo/icon/5e7c6241d6756.png' />
    </div>

    <div class="downarea">
        <button class="downbtn" id="appdownbtn"><span>点击下载APP</span></button>

    </div>
    <div class="wxtip" id="JweixinTip">
        <img style="width:100%;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjUAAAGbCAYAAAA862GbAAAgAElEQVR4XuydB5gURfrG39o4u6BIxhxAFEEREAH1FBMghvPuDJgDCoJZDKhgwnwGFCOmMyCG07u/kWBOYAAFBQOgZ0aCiYXd2VT/5+vpHnpne6a7Z7pnZnfffh6eO3eqvvrqVz3d71R99ZUCLxIgARIgARIgARLIkIDWuhSAVkpVZ2gq7eoq7ZqsSAIkQAIkQAIkQAKiZGKC5isAmwCYB2AGgH8rpT7LJiCKmmzSZlskQAIkQAIk0AwJaK3fAzDIoWsLAUwD8LhS6oewu05REzZh2icBEiABEiCBZkxAa70bgHdduqgBvAhgqvyvUqo+DCQUNWFQpU0SIAESIAESaAEEtNaiI/4AsIGP7n4H4D75p5T6xUc916IUNa6IWIAESIAESIAESMCJgNa6D4D5adKpAfA0gDuUUnPStNGgGkVNEBRpgwRIgARIgARaIAGt9bkAbgmg6x8DmALgCaVUZbr2KGrSJcd6JEACJEACJNDCCWit7wEwOkAMvwH4lzl787VfuxQ1fomxPAmQAAmQAAmQgEFAa/0ygGEh4JDA4hcAXKWU+sirfYoar6RYjgRIgARIgARIoAEBrbXE00hcTZjXJwAOV0otdWuEosaNED8nARIgARIgARJwJKC1Xg6gc5bwvALgMKWU7LZyvChqsjQSbIYESIAESIAEmhMBrXURADkSIdta4goAk5xy3WTbkeY0nuwLCZAACZAACbRYAlrrLQH8L0cAogB2STyGgaImR6PBZkmABEiABEigKRPQWv8dwDM57sNDAE5VStWJHxQ1OR4NNk8CJEACJEACTZGA1voGABem4bvsZtoWQJs06jpVWSbBykqpNRQ1ARGlGRIgARIgARJoKQTM4xG+ANA9jT5fBuBaAAMAHAvg6AAEzlwAe1LUpDEarEICJEACJEACLZmA1lpy00iOGqdrMYA1pmhx+nw1gM2tzMFa64hs2QZwPoCdMuA6hqImA3qsSgIkQAIkQAItjYDWugCAHGuQTIBcAOA9l5O7xyilJBtx/DJnf4YAuBjAXmlw/ZCiJg1qrEICJEACJEACLZWA1vp0OcYgSf8lE/AmSqnlWuv/AvhrknKLlFK9kjHUWg8GIFu3/Yib5RQ1LfWuZL9JgARIgARIwCcBcxv3pwA2SFJ1nlJqF/lMay0xMxLrkuwarJR6M5ULPsXNXIoanwPK4iRAAiRAAiTQEglorQsBvAFgjxT9l6R4EghsXFprWYYalKT8g0qpkV5Yaq3FxjkA/gFA/HC6RlHUeKHJMiRAAiRAAiTQwglorSdIJl8XDHsrpUT4WKLmJAAPJqnzJ4AuVsCwF7xa680BHGMGFve11ZEZn30parxQZBkSIAESIAESaMEEzKWkd1PMkgidGgAbKaXW2URNawCrAJQmwXewUkpO4/Z9aa03M3dYbQXgfjkTiqLGN0ZWIAESIAESIIGWQ0BrXW7udnLLSTNHKbVbIhmt9UsADkhC7B6l1JigaFLUBEWSdkiABEiABEigGRLQWt8M4DwPXbtBKTXeQdSMBXBnkvpLlVKSXTiQi6ImEIw0QgIkQAIkQALNj4DWujeAeS7LTlbHD1JKveggarYBIEcZJLvaK6V+DYIeRU0QFGmDBEiABEiABJohAa31DABDPXRN4mlEnEgm4UaX1nolgA5J7AxVSs3y0IZrEYoaV0QsQAIkQAIkQAItj4DWeiCAOR57/oZSau9kZV3E0RlKqWTLUx6bjxWjqPGFi4VJgARIgARIoGUQ0FpPBzDCY2/HKaVuSSFqrgdwUZLPb1RKJfvMY/MUNb5AsTAJkAAJkAAJtBQCWutWAOTgyWRb.........完整代码请登录后点击上方下载按钮下载查看