移動端屏幕適配+事件+常見問題解決

時間 2020-01-09

原文原文鏈接

移動端屏幕適配
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">css

移動端屏幕適配與響應式的區別
移動端屏幕適配：
移動端
寬高% / rem
字體px
寬高都隨着屏幕變化等比例變化
響應式：
PC+移動端
寬%
高、字體：px
寬度等比例變化，高度不變html

簡單適配方案：
simple.jshtml5

    (function () {
        'use strict';

        setRemUnit();

        window.addEventListener('resize', setRemUnit);

        function setRemUnit() {
            var docEl = document.documentElement;
            var ratio = 18.75;
            var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

            docEl.style.fontSize = viewWidth / ratio + 'px';
        }
    })();

通用適配方案：
flexible.jsandroid

    (function () {
        'use strict';

        // dpr->scale = 1 / dpr
        var docEl = document.documentElement,
            viewportEl = document.querySelector('meta[name="viewport"]'),
            dpr = window.devicePixelRatio || 1,
            maxWidth = 540,
            minWidth = 320;

        dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

        docEl.setAttribute('data-dpr', dpr);
        docEl.setAttribute('max-width', maxWidth);
        docEl.setAttribute('min-width', minWidth);


        var scale = 1 / dpr,
            content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';

        if (viewportEl) {
            viewportEl.setAttribute('content', content);
        } else {
            viewportEl = document.createElement('meta');
            viewportEl.setAttribute('name', 'viewport');
            viewportEl.setAttribute('content', content);
            document.head.appendChild(viewportEl);
        }

        setRemUnit();

        window.addEventListener('resize', setRemUnit);

        function setRemUnit() {
            var ratio = 18.75;
            var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

            if (maxWidth && (viewWidth / dpr > maxWidth)) {
                viewWidth = maxWidth * dpr;
            } else if (minWidth && (viewWidth / dpr < minWidth)) {
                viewWidth = minWidth * dpr;
            }

            docEl.style.fontSize = viewWidth / ratio + 'px';
        }
    })();

通用適配案例源碼：
預覽圖css3

index.htmlweb

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>通用適配應用</title>
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/icons.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/flexible.js"></script>
    </head>
    <body>
        <header class="header-container">
            <div class="navbar">
                <div class="navbar-left">
                    <i class="iconfont icon-scan"></i>
                </div>
                <div class="navbar-center">
                    <div class="searchBox">
                        <div class="searchBox-prepend">
                            <i class="iconfont icon-search"></i>
                        </div>
                        <input type="text" class="searchBox-input" placeholder="開學季有禮，好貨5折起">
                        <div class="searchBox-append">
                            <i class="iconfont icon-close"></i>
                        </div>
                    </div>
                </div>
                <div class="navbar-right">
                    <i class="iconfont icon-msg"></i>
                </div>
            </div>
        </header>

        <div class="main-container">
            <div class="slider-container">
                <img src="img/slider/1.jpg" alt="slider">
            </div>

            <nav class="nav-container">
                <ul class="nav">
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/1.png" alt="nav" class="nav-img">
                            <span class="nav-text">團購</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/2.png" alt="nav" class="nav-img">
                            <span class="nav-text">一元購</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/3.png" alt="nav" class="nav-img">
                            <span class="nav-text">優惠券</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/4.png" alt="nav" class="nav-img">
                            <span class="nav-text">教育</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/5.png" alt="nav" class="nav-img">
                            <span class="nav-text">旅行</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/6.png" alt="nav" class="nav-img">
                            <span class="nav-text">在線訂餐</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/7.png" alt="nav" class="nav-img">
                            <span class="nav-text">慶典</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/8.png" alt="nav" class="nav-img">
                            <span class="nav-text">秒殺</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/9.png" alt="nav" class="nav-img">
                            <span class="nav-text">拍賣</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="###" class="nav-link">
                            <img src="img/nav/10.png" alt="nav" class="nav-img">
                            <span class="nav-text">服務</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <div class="recommend-container">
                <ul class="recommend">
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/1.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">歐派總體櫥櫃定製簡約現代</p>
                            <p class="recommend-origPrice">
                                <del>¥2000.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span>
                                <span class="recommend-count">985件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/2.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">創維55吋4K超高清HDR</p>
                            <p class="recommend-origPrice">
                                <del>¥2999.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">2299</strong></span>
                                <span class="recommend-count">63件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/3.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">【到手259元】蘇泊爾 5L電壓力鍋</p>
                            <p class="recommend-origPrice">
                                <del>¥799.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">299</strong></span>
                                <span class="recommend-count">1908件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/4.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">三隻松鼠堅果禮包</p>
                            <p class="recommend-origPrice">
                                <del>¥125.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span>
                                <span class="recommend-count">9532件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/5.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">藍月亮洗衣液12斤</p>
                            <p class="recommend-origPrice">
                                <del>¥133.40</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
                                <span class="recommend-count">5399件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/6.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">福臨門葵花玉米油</p>
                            <p class="recommend-origPrice">
                                <del>¥109.90</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
                                <span class="recommend-count">6294件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/7.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">TP-LINK 全千兆端口雙頻無線路由器</p>
                            <p class="recommend-origPrice">
                                <del>¥179.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">169</strong></span>
                                <span class="recommend-count">4255件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/8.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">【前1800名再減50】家用高壓洗車機</p>
                            <p class="recommend-origPrice">
                                <del>¥790.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">268</strong></span>
                                <span class="recommend-count">1599件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/9.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">德國魯茜rusch迷你嬰兒輔食機 寶寶</p>
                            <p class="recommend-origPrice">
                                <del>¥898.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">159</strong></span>
                                <span class="recommend-count">881件已售</span>
                            </p>
                        </a>
                    </li>
                    <li class="recommend-item">
                        <a href="###" class="recommend-link">
                            <p class="recommend-pic">
                                <img src="img/recommend/10.jpg" alt="recommend" class="recommend-img">
                            </p>
                            <p class="recommend-name">西域之尚紅棗500g*5袋</p>
                            <p class="recommend-origPrice">
                                <del>¥89.00</del>
                            </p>
                            <p class="recommend-info">
                                <span class="recommend-price">¥<strong class="recommend-price-num">29.9</strong></span>
                                <span class="recommend-count">15049件已售</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tabbar-container">
            <ul class="tabbar">
                <li class="tabbar-item tabbar-item-active">
                    <a href="###" class="tabbar-link">
                        <i class="iconfont icon-home"></i>
                        <span>首頁</span>
                    </a>
                </li>
                <li class="tabbar-item">
                    <a href="###" class="tabbar-link">
                        <i class="iconfont icon-category"></i>
                        <span>分類頁</span>
                    </a>
                </li>
                <li class="tabbar-item">
                    <a href="###" class="tabbar-link">
                        <i class="iconfont icon-cart"></i>
                        <span>購物車</span>
                    </a>
                </li>
                <li class="tabbar-item">
                    <a href="###" class="tabbar-link">
                        <i class="iconfont icon-personal"></i>
                        <span>我的中心</span>
                    </a>
                </li>
            </ul>
        </div>
    </body>
    </html>

base.csssql

        * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        font-size: 12px;
        color: #5d655b;
    }

    a {
        font-size: 12px;
        color: #686868;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    input {
        font-size: 12px;
        border: none;
        background: none;
        outline: none;
    }
    [data-dpr="2"] body,
    [data-dpr="2"] a,
    [data-dpr="2"] input {
        font-size: 24px;
    }
    [data-dpr="3"] body,
    [data-dpr="3"] a,
    [data-dpr="3"] input {
        font-size: 36px;
    }

    li {
        list-style: none;
    }

    img {
        vertical-align: top;
        border: none;
        width: 100%;
    }

icons.csschrome

        @font-face {
        font-family: "iconfont";
        src: url('../fonts/iconfont.eot?t=1522237704791');
        /* IE9*/
        src: url('../fonts/iconfont.eot?t=1522237704791#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('../fonts/iconfont.ttf?t=1522237704791') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('../fonts/iconfont.svg?t=1522237704791#iconfont') format('svg');
        /* iOS 4.1- */
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-backtop:before {
        content: "\e689";
    }
    .icon-personal:before {
        content: "\e610";
    }
    .icon-scan:before {
        content: "\e609";
    }
    .icon-clear:before {
        content: "\e622";
    }
    .icon-msg:before {
        content: "\e7a8";
    }
    .icon-category:before {
        content: "\e7f9";
    }
    .icon-search:before {
        content: "\e616";
    }
    .icon-delete:before {
        content: "\e6ac";
    }
    .icon-service:before {
        content: "\e643";
    }
    .icon-setting:before {
        content: "\e64c";
    }
    .icon-back:before {
        content: "\e60f";
    }
    .icon-shop:before {
        content: "\e624";
    }
    .icon-close:before {
        content: "\e60c";
    }
    .icon-more:before {
        content: "\e85c";
    }
    .icon-home:before {
        content: "\e699";
    }
    .icon-collect:before {
        content: "\e78c";
    }
    .icon-cart:before {
        content: "\e635";
    }

index.css瀏覽器

    /*-- 佈局 start --*/

    html, body {
        width: 100%;
        height: 100%;
    }

    /*header*/
    .header-container {
        top: 0;
        background-color: rgba(222, 24, 27, 0.9);
    }
    .header-container,
    .tabbar-container {
        position: fixed;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 2.5rem;
    }

    /*tabbar*/
    .tabbar-container {
        bottom: 0;
        background-color: #fff;
        box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);
    }

    /*main-container*/
    .main-container {
        padding: 2.5rem 0;
        background-color: #eee;
    }

    /*nav-container*/
    .nav-container {
        background-color: #fff;
        margin-bottom: 0.5rem;
    }

    /*-- 佈局 end --*/


    /*-- 組件 start --*/

    /*navbar*/
    .navbar {
        display: flex;
        height: 100%;
    }
    .navbar-left,
    .navbar-center,
    .navbar-right {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .navbar-left,
    .navbar-right {
        width: 2.2rem;
    }
    .navbar-center {
        flex: 1;
    }
    .navbar-left .iconfont,
    .navbar-right .iconfont {
        color: #fff;
        font-size: 1.2rem;
    }

    /*searchBox*/
    .searchBox {
        display: flex;
        width: 100%;
        height: 1.6rem;
        border-radius: 0.8rem;
        background-color: #fff;
    }
    .searchBox-prepend,
    .searchBox-input,
    .searchBox-append {
        height: 100%;
    }
    .searchBox-prepend,
    .searchBox-append {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.6rem;
    }
    .searchBox-input {
        flex: 1;
    }
    .searchBox .iconfont {
        color: #ccc;
        font-size: 0.9rem;
        font-weight: bold;
    }

    /*nav*/
    .nav {
        display: flex;
        flex-wrap: wrap;
        padding: 0.8rem 0 0.4rem;
    }
    .nav-item {
        width: 20%;
        margin-bottom: 0.4rem;
    }
    .nav-link {
        display: block;
        text-align: center;
    }
    .nav-img {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: 0.2rem;
    }
    .nav-text {
        display: block;
    }

    .tabbar,
    .tabbar-item,
    .tabbar-link {
        height: 100%;
    }
    .tabbar {
        display: flex;
    }
    .tabbar-item {
        width: 25%;
    }
    .tabbar-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .tabbar-link .iconfont {
        font-size: 1.2rem;
    }
    .tabbar-item-active .tabbar-link {
        color: #de181b;
    }

    /*-- 組件 end --*/


    /*-- 內容 start --*/

    /*recommend*/
    .recommend {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .recommend-item {
        width: 49.333333%;
        background-color: #fff;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
        margin-bottom: 0.25rem;
    }
    .recommend-link {
        display: block;
        width: 100%;
        height: 100%;
    }
    .recommend-pic {
        width: 100%;
        margin-bottom: 0.4rem;
    }
    .recommend-img {
        width: 100%;
        height: 9.25rem;
    }
    .recommend-name,
    .recommend-origPrice,
    .recommend-info {
        padding: 0 0.25rem;
        margin-bottom: 0.4rem;
    }
    .recommend-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .recommend-origPrice {
        color: #ccc;
    }
    .recommend-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .recommend-price {
        color: #e61414;
    }
    .recommend-price-num {
        font-size: 20px;
    }
    [data-dpr="2"] .recommend-price-num {
        font-size: 40px;
    }
    [data-dpr="3"] .recommend-price-num {
        font-size: 60px;
    }
    .recommend-count {
        color: #999;
    }

    /*-- 內容 end --*/

移動端事件
touchstart 進入目標區域
touchmove 在目標區域移動
touchend 離開目標區域app

event對象

    <script>
        var boxEl = document.getElementById('box');

        boxEl.addEventListener('touchstart', handleStart, false);
        boxEl.addEventListener('touchmove', handleMove, false);
        boxEl.addEventListener('touchend', handleEnd, false);

        function handleStart(ev) {
            console.log('touchstart', ev);
            console.log(ev.touches, ev.targetTouches, ev.changedTouches);
            var touch = ev.changedTouches[0];
            console.log(touch.pageX, touch.pageY);
        }
        function handleMove(ev) {
            console.log('touchmove');
        }
        function handleEnd(ev) {
            console.log('touchend', ev);
        }
    </script>

其餘觸摸事件
hammer.js本身去官網下哈

    <script src="js/hammer.min.js"></script>
    <script>
        var boxEl = document.getElementById('box');

        var hammertime = new Hammer(boxEl);
        hammertime.on('pan swipe tap doubletap press pinch rotate', function(ev) {
            console.log(ev.type);
        });
    </script>

利用hammer作出滑動切換的幻燈片

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>幻燈片的滑動切換</title>
    <link rel="stylesheet" href="css/slider.css">
</head>
<body>
    <div id="slider" class="slider">
        <div class="slider-item-container">
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/1.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/2.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/3.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/4.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/5.jpg" alt="slider" class="slider-img">
                </a>
            </div>
        </div>
    </div>

    <script src="js/hammer.min.js"></script>
    <script src="js/slider.js"></script>
    <script>
        var slider = new Slider(document.getElementById('slider'), {
            initIndex: 0, // 初始顯示第幾張幻燈片，從0開始
            speed: 300, // 幻燈片的切換速度
            hasIndicator: true // 是否須要指示器indicator
        });

        var hammer = new Hammer(slider.getItemContainer());

        var isSwiping = false;

        hammer.on('panmove', function (ev) {
            var distance = ev.deltaX + slider.getDistanceByIndex(slider.getIndex());

            slider.move(distance);
        });
        hammer.on('panend', function (ev) {
            if (isSwiping) return;

            var distance = ev.deltaX + slider.getDistanceByIndex(slider.getIndex());
            var index = getIndexByDistance(distance);

            slider.to(index);
        });

        // 根據容器移動的距離獲取索引
        function getIndexByDistance(distance) {
            if (distance > 0) {
                return 0;
            } else {
                return Math.round(-distance / slider.getDistancePerSlide());
            }
        }

        hammer.on('swipeleft', function (ev) { // next
            isSwiping = true;
            slider.next(function () {
                isSwiping = false;
            });
        });
        hammer.on('swiperight', function (ev) { // prev
            isSwiping = true;
            slider.prev(function () {
                isSwiping = false;
            });
        });
    </script>
</body>
</html>

slider.css

/*css reset*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
img {
    border: none;
    vertical-align: top;
}
a {
    -webkit-tap-highlight-color: transparent;
}

/*slider*/
.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 183px;
}
.slider-item-container,
.slider-item,
.slider-link,
.slider-img {
    width: 100%;
    height: 100%;
}
.slider-item-container {
    display: flex;
    transition: transform 0;
}
.slider-item {
    flex-shrink: 0;
}
.slider-link {
    display: block;
}
.slider-indicator-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
.slider-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #000;
    opacity: 0.2;
    border-radius: 50%;
    margin-right: 8px;
}
.slider-indicator-active {
    background-color: #007aff;
    opacity: 1;
}

slider.js

function Slider(el, options) {
    var defaults = {
        initIndex: 0,
        speed: 300,
        hasIndicator: false
    };
    this.options = {};
    this.options.initIndex = typeof options.initIndex !== 'undefined' ? options.initIndex : defaults.initIndex;
    this.options.speed = typeof options.speed !== 'undefined' ? options.speed : defaults.speed;
    this.options.hasIndicator = typeof options.hasIndicator !== 'undefined' ? options.hasIndicator : defaults.hasIndicator;

    this.el = el;
    this.itemContainer = el.querySelector('.slider-item-container');
    this.items = this.itemContainer.children;
    this.distancePerSlide = this.items[0].offsetWidth;

    this.minIndex = 0;
    this.maxIndex = this.items.length - 1;
    // this.index = this.options.initIndex;
    this.index = this._adjustIndex(this.options.initIndex);

    this.move(this.getDistanceByIndex(this.index));

    if (this.options.hasIndicator) {
        this._createIndicators();
        this._setIndicatorActive(this.index);
    }
}
Slider.prototype.to = function (index, cb) {
    this.index = index;

    this._setTransitionSpeed(this.options.speed);
    this.move(this.getDistanceByIndex(this.index));

    var self = this;
    this.itemContainer.addEventListener('transitionend', function () {
        self._setTransitionSpeed(0);

        if (typeof cb === 'function') {
            cb();
        }
    }, false);

    if (this.options.hasIndicator) {
        this._setIndicatorActive(this.index);
    }
};
Slider.prototype._setTransitionSpeed = function (speed) {
    this.itemContainer.style.transitionDuration = speed + 'ms';
};
Slider.prototype.prev = function (cb) {
    this.to(this.index - 1, cb);
};
Slider.prototype.next = function (cb) {
    this.to(this.index + 1, cb);
};
Slider.prototype._adjustIndex = function (index) {
    if (index < this.minIndex) {
        index = this.minIndex;
    } else if (index > this.maxIndex) {
        index = this.maxIndex;
    }

    return index;
};
Slider.prototype.move = function (distance) {
    this.itemContainer.style.transform = 'translate3d(' + distance + 'px, 0, 0)';
};
Slider.prototype.getDistanceByIndex = function (index) {
    return -index * this.distancePerSlide;
};
Slider.prototype._createIndicators = function () {
    var indicatorContainer = document.createElement('div');
    var html = '';

    indicatorContainer.className = 'slider-indicator-container';
    for (var i = 0; i <= this.maxIndex; i++) {
        html += '<span class="slider-indicator"></span>';
    }
    indicatorContainer.innerHTML = html;
    this.el.appendChild(indicatorContainer);
};
Slider.prototype._setIndicatorActive = function (index) {
    this.indicators = this.indicators || this.el.querySelectorAll('.slider-indicator');
    for (var i = 0; i < this.indicators.length; i++) {
        this.indicators[i].classList.remove('slider-indicator-active');
    }

    this.indicators[index].classList.add('slider-indicator-active');
};

Slider.prototype.getItemContainer = function () {
    return this.itemContainer;
};
Slider.prototype.getIndex = function () {
    return this.index;
};
Slider.prototype.getDistancePerSlide = function () {
    return this.distancePerSlide;
};

移動調試和終端檢測
移動端檢測：

    <script>
        // 切換Android、iPhone、iPad
        console.log(navigator.userAgent);
        var isMobile = navigator.userAgent.match(/android|iphone|ipod|ipad/i);
        if (isMobile) {
            location.href = 'https://m.test.com';
        } else {
            location.href = 'https://www.test.com';
        }
    </script>

移動端常見問題：
瀏覽器兼容性：
HTML5兼容處理 html5shiv
本身去官網下載哈

    <script src="js/html5shiv.min.js"></script>

不一樣瀏覽器前綴：

        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
-----------------------
        <script>
            var requestAnimationFrame = window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (fn) {
                    setTimeout(fn, 16);
                };

                requestAnimationFrame(function () {
                    console.log(1);
                });
        </script>

modernizr 檢測瀏覽器的css3和HTML5的屬性，從而經過CSS來解決兼容性問題
本身去官網下載哈

    <script src="js/modernizr.js"></script>

click 300ms 延遲問題解決：

    <script src="js/fastclick.js"></script>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>

單行文字溢出省略

        .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

多行文字溢出省略

        .multiline-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal !important;
            word-wrap: break-word;
        }

水平居中和垂直居中方案：
1 容器寬高自適應沒有指定寬高內容撐開
　　1-1 內聯元素或者內聯塊元素不能設置寬高內容撐開
　　　　1-1-1 文字水平垂直居中多行文字用padding撐開

        display: inline/inline-block;
        padding: 30px 20px;

　　1-1-2 容器水平垂直居中內聯元素

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

　　1-2 塊元素不能設置寬高
　　　　1-2-1 文字水平垂直居中多行文字

        display: block;
        text-align: center;
        padding: 30px 0;

　　1-2-2 容器水平垂直居中塊元素

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

2 指定容器寬高寬高
　　2-1 內聯元素不能設置寬高內容撐開

　　2-2 內聯塊元素設置寬高
　　　　2-2-1 文字水平垂直居中多行文字

        display: inline-block;
        width: 300px;
        height: 100px;
        text-align: center;
        line-height: 100px;

        多行文字
        display: flex;
        justify-content: center;
        align-items: center;

　　 2-2-2 容器水平垂直居中內聯塊元素

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-left: -150px;
        margin-top: -50px;

2-3 塊元素設置寬高

2-3-1 文字水平垂直居中多行文字

        display: block;
        width: 300px;
        height: 100px;
        text-align: center;
        line-height: 100px;

2-3-2 容器水平垂直居中塊元素

        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -50px;

多行文字 display: flex; justify-content: center; align-items: center;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。