簡述移動端與PC端的區別

一、移動端與PC端的區別

• PC考慮的是瀏覽器的兼容性，而移動端開發考慮的更多的是手機兼容性，由於目前不論是android手機仍是ios手機，通常瀏覽器使用的都是webkit內核，因此說作移動端開發，更多考慮的應該是手機分辨率的適配，和不一樣操做系統的略微差別化；
• 在部分事件的處理上，移動端多出來的事件是觸屏事件，而缺乏的是hover事件。 另外包括移動端彈出的手機鍵盤的處理，這樣的問題在PC端都是遇不到的；
• 在佈局上，移動端開發通常是要作到佈局自適應的；
• 在動畫處理上，PC端因爲要考慮IE的兼容性，因此一般使用JS作動畫的通用性會更好一些，可是CSS3作了很大的犧牲， 而在手機端，若是要作一些動畫、特效等，第一選擇確定是CSS3， 既簡單、效率又高；
• 通常pc端用jquery，移動端用zepto，由於移動端的流量仍是比較重要的， 因此引入的資源或者插件，能小則小，一個30k的資源和一個80k的資源，在移動端的差異仍是挺大的；（而未壓縮的jquery是262kb， 壓縮的jquey是83kb，可見二者的差異之大。）
• 好比在手機上的300ms的延遲，這在PC端是沒有的；

二、如何解決移動端click屏幕產生200-300ms的延遲響應問題？

• 產生的緣由：

  當用戶一次點擊屏幕以後，瀏覽器並不能馬上判斷用戶是要進行雙擊縮放，仍是想要進行單擊操做。所以，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。

  因而，300 毫秒延遲就這麼誕生了。

• 形成的問題：按鈕點擊延遲或者按鈕點擊失效；
• 解決方案：
  • 禁用縮放  meta標籤
  • 更改默認的視口寬度
  • fastClick.js （常見）

    步驟一：引入js文件：
    步驟二：引入下面任何一種js代碼
    //第一種   最好在body前面引入下面的代碼
    if ('addEventListener' in document) {
       document.addEventListener('DOMContentLoaded', function() {
           FastClick.attach(document.body);
       }, false);
    }
    //第二種：引入jquery組件
    $(function() {
        FastClick.attach(document.body);
    })
    //第三種
    window.addEventListener( "load", function() {
        FastClick.attach( document.body );
    }, false );

• • touch.js
  • zepto (作移動端的DOM操做 可是作移動端事件的時候很是不建議用zepto裏面的touch模塊，即用tap事件來取代click事件，由於tap事件會有 「點透」 問題)
              jquery是做用於pc端   277kb
              zepto做用於移動端    56kb
    • 點透：http://www.javashuo.com/article/p-nwgsqgiz-y.html
      • 概念：列表頁面上建立一個彈出層，彈出層有個關閉按鈕，你點了這個按鈕關閉彈出層後後，這個按鈕正下方的內容也會執行點擊事件（或打開連接）。
      • 出現的緣由：

        能夠看出zepto的tap經過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發的,
        再點擊完成時的tap事件(touchstart\touchend)須要冒泡到document上纔會觸發，而在冒泡到document以前，用戶手的接觸屏幕(touchstart)
        和離開屏幕(touchend)是會觸發click事件的,由於click事件有延遲觸發(這就是爲何移動端不用click而用tap的緣由)(大概是300ms,
        爲了實現safari的雙擊事件的設計)，因此在執行完tap事件以後，彈出來的選擇組件立刻就隱藏了，此時click事件還在延遲的300ms之中，
        當300ms到來的時候，click到的其實不是完成而是隱藏以後的下方的元素，若是正下方的元素綁定的有click事件此時便會觸發，
        若是沒有綁定click事件的話就當沒click，可是正下方的是input輸入框(或者select選擇框或者單選複選框)，點擊默認聚焦而彈出輸入鍵盤，
        也就出現了上面的點透現象。

      • 解決方法：
        • 用click事件取代tap事件，在引入fastclick.js解決300ms延遲；（終極方案）
        • 來得很直接github上有個fastclick能夠完美解決https://github.com/ftlabs/fastclick
          
          • 引入fastclick.js，由於fastclick源碼不依賴其餘庫因此你能夠在原生的js前直接加上；

            window.addEventListener( "load", function() {
                FastClick.attach( document.body );
            }, false );

          • 或者有zepto或者jqm的js裏面加上；

            $(function() {
                FastClick.attach(document.body);
            });

          • 固然require的話就這樣；

            var FastClick = require(‘fastclick‘);
            FastClick.attach(document.body, options);

        •  touchend代替tap事件並阻止掉touchend的默認行爲preventDefault()；

          $("#cbFinish").on("touchend", function (event) {
              //不少處理好比隱藏什麼的
             event.preventDefault();
          });

        • 延遲必定的時間(300ms+)來處理事件；

          $("#cbFinish").on("tap", function (event) {
              setTimeout(function(){
              //不少處理好比隱藏什麼的
               },320);
          });