APP下载页面,根据手机系统和浏览器下载对应的APP

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <link rel=icon href=favicon.png>
    <meta name=viewport
        content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name=format-detection content="telephone=no">
    <meta name=msapplication-tap-highlight content=no>
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <title>下载页</title>
    <style>
        #app {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            padding-top: 15%;
        }

        #btn {
            height: 50px;
            width: 60%;
            background-color: #409eff;
            color: whitesmoke;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id=app>
        <h3>TrendOS</h3>
        <img src=icon-1024.png height="180px" />
        <p style="font-size:12px;color:gray;margin-top:3px">请在浏览器中打开</p>
        <div id=btn>
            点击下载安装
        </div>
    </div>
    <script>
        var version = '1.6.0'
        window.onload = function () {
            document.getElementById('btn').addEventListener('click', download)
        }
        function download() {
            var type = uaType()
            if (type === 'weixin') {
                alert('请在浏览器中打开')
            } else if (type === 'ios') {
                window.location.href = 'itms-services://?action=download-manifest&url=https://xxxx.com/v' + version + '/manifest.plist'
            } else {
                window.location.href = 'https://xxx.com/v' + version + '/xxx.apk'
            }
        }

        function uaType() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return 'weixin';
            } else if (ua.match(/Android/i)) {
                return 'android'
            } else if (ua.match(/iphone|ipod|ipad/i)) {
                return 'ios'
            } else {
                return ''
            }
        }

    </script>
</body>

</html>
[![](https://img.javascriptcn.com/0d035a45f4e2b186826e97e0a2e2d44c.png) ](/u/codecook_5b79eebd085e9)

关注作者

推荐阅读
![Planets](https://img.javascriptcn.com/6e947422efcfb77d5da4e2db3c0ce2d6.png)
原文链接:segmentfault.com

上一篇:前端模拟数据jsonServer 和 npm 命令执行合并包
下一篇:最先/最后进球指数 api接口示例

相关推荐

官方社区

扫码加入 JavaScript 社区