index.html

<!DOCTYPE html>
<!-- <html dir="rtl" lang="ar"> -->
<html>

<head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#444">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="screen-orientation" content="portrait" />
    <!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> -->
    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="white" /> -->
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- 强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <!-- <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> -->
    <!-- ios启动画面 -->
    <!-- <link rel="apple-touch-startup-image" href="start.png"/> -->
    <!-- <link rel="shortcut icon" href="http://cdn-img.easyicon.net/favicon.ico" /> -->

    <!-- <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script> -->
    <script type="text/javascript">
        // new VConsole();
        ;
        (function(designWidth, maxWidth) {
            var doc = document,
                win = window;
            var docEl = doc.documentElement;
            var tid;
            var rootItem, rootStyle;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (!maxWidth) {
                    maxWidth = 540;
                };
                if (width > maxWidth) {
                    width = maxWidth;
                }
                //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
                var rem = width * 100 / designWidth;
                //兼容UC开始
                rootStyle = "html{font-size:" + rem + 'px !important}';
                rootItem = document.getElementById('rootsize') || document.createElement("style");
                if (!document.getElementById('rootsize')) {
                    document.getElementsByTagName("head")[0].appendChild(rootItem);
                    rootItem.id = 'rootsize';
                }
                if (rootItem.styleSheet) {
                    rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
                } else {
                    try {
                        rootItem.innerHTML = rootStyle
                    } catch (f) {
                        rootItem.innerText = rootStyle
                    }
                }
                //兼容UC结束
                docEl.style.fontSize = rem + "px";
            };
            refreshRem();

            win.addEventListener("resize", function() {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);

            win.addEventListener("pageshow", function(e) {
                if (e.persisted) { // 浏览器后退的时候重新计算
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function(e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 640);
    </script>

    <style>
        .atom-spinner-ripple {
            display: block !important;
            margin: 50% auto 15px;
            width: 1rem;
            height: 1rem;
            background: #666;
            border-radius: 100%;
            animation: ripple 1s 0s ease-in-out infinite;
        }

        @keyframes ripple {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        .loading-tip {
            margin-top: 30px;
            font-size: 18px;
        }
    </style>

    <title>any-ui</title>
</head>

<body>
    <div id="app">
        <i class="atom-spinner-ripple"></i>
        <p align="center" class="loading-tip">any-ui, 更快更简单</p>
    </div>
</body>

</html>