移動端web開發 淺析

1. viewport

① viewport在移動端承載網頁的區域：具備默認格式

 

②設置viewport屬性，適配移動端設備

主流設置：

<meta name = 」viewport」 content = 」width = device-width , initial-scale = 1.0 , user-scalable = 0」>

主流設置快捷鍵：meta: vp  tab鍵

name = 」viewport」    viewport 設置入口格式

width = device-width  設置viewport寬度與移動設備寬度相同

initial-scale = 1.0     初始化縮放比例與pc端比例爲：1比1

user-scalable = 0  是否容許用戶自行縮放，可設置值：1,0或者yes,no    0爲不容許

若是設置了用戶不能自行縮放，那麼下面兩個參數沒有意義

maximum-scale    用戶最大縮放比，可設置大於0的數字

minimum-scale    用戶最小縮放比，可設置大於0的數字

非主流設置：

參考taobao，判斷屏幕尺寸，設置動態設置initial-scale值

2.  base.css設置

reset css 重置標籤的默認樣式代碼以下：

*,::before,::after {

    padding:0;  margin:0; 

    -webkit-tap-highlight-color: transparent;  移動端特有清除高亮

      -webkit-box-sizing: border-box;

    box-sizing: border-box;     用兩種寫法，兼容處理

}

body {

    font-size: 14px;

    color: #333;

    font-family: 「MicroSoft YaHei」 , 「sans-serif」; 這是設備默認樣式

}

ul,ol {

    list-style: none;

}

a {

    text-decoration: none;

    color: #333;

}

a: hover {

    color: #333;

}

input , textarea {

    border: none;    

    outline: none;      選中時沒有邊框

    resize: none;       不容許用戶自行拉伸

       -webkit-appearance: none;     清除瀏覽器給input自帶的樣式，設置組件默認樣式爲空

}

.f_left {

    float: left;

}

.f_right {

    float: right;

}

.clearfix::before,.clearfix::after {     清除浮動

    content: 」.」;

    line-height: 0;

    height: 0;

    display: block;

    visibility: hidden;

    clear: both;

}

3. 設置動態頁面的容器div  類名可設爲：.layout

.layout {

          min-width: 300px;     適配小屏幕設備

          max-width: 640px;    設計圖的基本格式

}

4. 部分CSS格式說明

①移動端input格式設置，調用輸入法時，enter鍵變爲搜索鍵

        <form action="#">

            <input type="search"  placeholder="請輸入"/>

        </form>

② position: fixed 設置後定位失效，fixed是以window爲基準的

要想實現效果，給fixed元素添加一個子盒子，給子盒子設置min-widht、max-width和margin: 0 auto便可居中;

5. 物理像素，在移動端圖片1:1顯示可能會出現失真

iPhone 4：2:1  四個物理像素顯示1px   壓縮圖片一倍可顯示正常

iPhone 6s plus:  3:1  九個物理像素顯示1px    高清屏

 

6. 基本事件

① touch事件    在addEventListener()中添加事件

（1）touchstart事件：手指觸摸屏幕觸發事件

（2）touchmove事件：手指在屏幕上滑動時連續觸發事件

（3）touchend事件：手指離開屏幕觸發事件  chrome模擬器在模擬手機touchend時可能會丟失事件，最好將事件綁定在window上

（4）touch的事件對象 event

dom.addEventListener (「touchstart」 , function( event ) {

              console.log(event);

})

targetTouches：頁面上目標元素的全部當前觸摸，元素外觸摸點不包含

touches：頁面上全部的觸摸點

changedTouches： 頁面上最新更改的全部觸摸，在touchend事件中只記錄changedTouches，targetTouches和touches都不會被記錄

以上三個屬性的數據類型都是數組

頁面第一個觸摸點信息touches[0]：

dom.addEventListener (「touchstart」 , function( event ) {

              console.log(event.touches[0]);

})

 

能夠根據相關數據獲取觸摸點的位置

clientX：觸摸點在瀏覽器視口中的X座標

clientY：觸摸點在瀏覽器視口中的Y座標

pageX：觸摸點在頁面中的x座標

pageY：觸摸點在頁面中的y座標

screenX：觸摸點在屏幕中的x座標

screenY：觸摸點在屏幕中的y座標

②過渡結束事件transitionEnd  webkitTransitionEnd過渡結束後觸發

dom.addEventListener(「transitionEnd」 , function( e ){  })

dom.addEventListener(「webkitTransitionEnd」 , function( e ){  })

③動畫結束事件animationEnd  webkitAnimationEnd動畫結束後觸發

dom.addEventListener(「animationEnd」 , function( e ){  })

dom.addEventListener(「webkitAnimationEnd」 , function( e ){  })

④ click事件

click事件在移動端有300ms的延遲，在touchend事件以後發生，有300ms延遲因此用戶體驗並很差

測試代碼以下：

    dom.addEventListener("touchstart", function () {

        console.time("click");    標記一個時間

        console.time("touchend")

    });

    dom.addEventListener("touchend", function () {

        console.timeEnd("touchend");    計算該標記執行間隔時間

    });

    dom.addEventListener("click", function () {

        console.timeEnd("click");    計算該標記執行間隔時間

})

封裝一個tap事件讓點擊屏幕150ms內觸發，且不觸發touchmove事件：

tabb.tap = function (dom, callback) {

        if (dom && typeof dom == 'object') {

            var isMove = false;

            var startTime = 0;

            dom.addEventListener('touchstart', function (e) {

                startTime = Date.now();

            });

            dom.addEventListener('touchmove', function (e) {

                isMove = true;

            });

            dom.addEventListener('touchend', function (e) {

               if (!isMove && ( Date.now () – startTime ) < 150) {

                callback && callback(e);

               }

                isMove = false;          重置參數

                startTime = 0;

            });

    }

}

7.  zepto.js

使用語法與jQuery基本相同，可理解爲輕量化、模塊化的jQuery

使用引包增長功能：

（1）包含五個模塊  core  event  form  ajax  ie

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

（2）擴展性選擇器模塊

    <script src="zepto/selector.js"></script>

（3）動畫模塊

    <script src="zepto/fx.js"></script>

（4）移動端事件模塊

<script src="zepto/touch.js"></script>

8.  響應式開發

媒體媒介media query 設置不一樣寬度下的樣式：and以後必定要加空格

0-768px 移動端顯示：   

@media screen and（空格）(max-width: 768px){

           .container{ width: 100%; background: red };

}

768px-992px 小屏設備顯示：

@media screen and (min-width:768px) and (max-width: 992px){

           .container{ width: 100%; background: yellow};

}

992px-1200px 中屏設備顯示：

@media screen and (min-width:992px) and (max-width: 1200px){

           .container{ width: 100%; background: green};

}

1200px- 大屏設備顯示：

@media screen and（空格）(min-width: 1200px){

           .container{ width: 100%; background: black };

}

9.  bootstrap

英文網：http://getbootstrap.com/

中文網：http://www.bootcss.com/

10.  結構性選擇器

①  「+」號選擇器

div + div {}   .class + div {}

選擇目標元素div或者.class的下一個元素div會被選中

② 「~」號選擇器

div ~ div {}   .class ~ div {}

選擇目標元素div或者.class後面的全部同級元素div會被選中

11.  嚮應式開發後臺數據渲染underscore.js