關於移動端前端開發和PC端前端開發的一點總結

首先就是操做兼容性和個移動版瀏覽器的兼容性：傳統設備上用戶利用鼠標（包括觸摸版）和鍵盤來操做網頁，放大圖片、拖拽元素、進行頁面滾動等等。一些常見的鼠標和鍵盤事件諸如mouseover、mouseout、mousemove、click、foucs、blur等爲咱們提供了很好的頁面交互操做，具體能夠參考W3school。

 　　然而，開發支持觸摸屏的網頁與傳統意義上的網頁有很大的不一樣。就拿鼠標hover事件來講，例如頁面上有一個表格，當鼠標指向表格的 title時你但願在附近的某個地方顯示一個浮動的tooltip。固然，你但願這個tooltip能更加引發瀏覽者的注意，所以你自定義了一個DIV元 素而且經過JavaScript讓它動態顯示或隱藏。這個程序很簡單，而且在普通設備的多個不一樣版本的瀏覽器上都運行良好。可是若是你在支持觸摸屏的設備 上瀏覽網頁的時候問題卻來了，設備不支持鼠標，所以用戶沒法用鼠標來hover表格的title元素。用戶惟一能和網頁進行交互的設備就是用手指去觸摸或 滑動屏幕，然而在一個非touch friendly的網頁上用手指去觸發傳統的mouse hover事件會顯得很是怪異，你會發現tooltip會在你手指接觸到屏幕的一瞬間顯示，然後立刻會消失。這是由於瀏覽器默認觸發了mouseover 和mouseout兩個事件，而這兩個事件只是在手指接觸屏幕這一個操做中完成的，你根本沒有辦法去控制它。這只是許多不一樣中的一個小例子，還有不少不一 樣的地方，如你在傳統設備上用鼠標點擊一個圖片按鈕不動用來連續不停地滾動DIV，而在觸摸屏上瀏覽器會默認爲你要顯示右鍵菜單而阻止了該事件繼續執行。 傳統設備上一般狀況下同一時間裏系統只容許一個鼠標接受用戶的操做，而觸摸屏通常都支持多點觸摸甚至支持各類不一樣的手勢，如左右滑動、兩隻放大縮小和旋轉 等。

　　隨着HTML5的發展，爲了支持對觸摸屏的操做，多個瀏覽器廠商都在本身的瀏覽器引擎中添加了不少支持touch的事件。可是因爲W3C並無 提供一個統一的標準，或者說該標準在不一樣的瀏覽器廠商中所遵循的狀況也有很大區別，所以咱們不得不針對瀏覽器版本作一些特殊的處理。這到讓我想起了IE瀏 覽器在許多方面與其它瀏覽器的不一樣，此次也不例外！

　這裏有一些頁面介紹了在不一樣瀏覽器中對touch事件的支持，讀者能夠看一下它們之間到底有哪些不一樣。

　　IE瀏覽器對touch事件的支持：http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

　　Firefox瀏覽器對touch事件的支持：https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events?redirectlocale=en-US&redirectslug=DOM%2FTouch_events

　　基本上有兩大陣營：IE瀏覽器和基於Webkit內核的瀏覽器。

       那麼如何才能開發一個通用的支持touch事件的頁面呢？基本上，咱們只須要區別IE和Webkit內核的瀏覽器就好了，剩下的兼容性問題一般都比較好解決。MSDN的這個頁面介紹了IE對指針和筆勢事件的支持http://msdn.microsoft.com/zh-cn/library/ie/hh673557.aspx其中有講到如何檢測對指針事件的支持，咱們能夠利用該方法來區別IE和其它瀏覽器。看下面這個程序片斷：

 

if (window.navigator.msPointerEnabled) {    /*Events for IE only*/
    document.getElementById("id0").addEventListener("MSPointerOver", function (e) {
          /*Add mouse over event for touch*/ 
        if (e.pointerType == e.MSPOINTER_TYPE_MOUSE) {
            methods.onMouseOver(this, e);
        }
    });
   document.getElementById("id0").addEventListener("MSPointerOut", function (e) {
                 /*Add mouse out event for touch*/
        if (e.pointerType == e.MSPOINTER_TYPE_MOUSE) {
            methods.onMouseOut(this, e);
        }
    });
    document.getElementById("id0").addEventListener("MSPointerDown", function (e) {
       if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
           /*Do something for touch input only*/
            methods.onTouchInput(this.parentNode);
        }        else {            /*Do something for non-touch input*/
            methods.onMouseClick(this.parentNode);
        }
    });
}
else {
     /*Events for non-IE or IE without msPointerEnabled*/
    $(this).bind("touchstart", function (e) {
        e.preventDefault();
        methods.onMouseClick(this.parentNode);
        methods.onMouseOver(this, e);
    });
     /*Common Mouse events: mouseover, mouseout, click*/
    $(this).click(function () {
          methods.onMouseClick(this); });
    $(this).hover( 
           function (e) {
                methods.onMouseOver(this, e);
            },
           function (e) { methods.onMouseOut(this, e); });
}

代碼有兩個主要的分支，針對IE和Webkit內核的瀏覽器。在IE瀏覽器中，MSPointerDown事件不會自動阻止鼠標事件，所以須要經過event.pointerType來判斷指針類型。event.pointerType是一個枚舉變量，一共有三個值：

　　MSPOINTER_TYPE_TOUCH = 2

　　MSPOINTER_TYPE_PEN = 3

　　MSPOINTER_TYPE_MOUSE = 4

　　很奇怪爲何沒有值爲1的枚舉值？多是用做保留了吧！這也就是說MSPointerDown事件在觸發的同時還會觸發鼠標相關的事件，事實上鼠標事件是最開始觸發的。所以咱們須要先判斷指針類型，進行不一樣的處理。爲了增長頁面的兼容性，讓其在支持鼠標操做的設備上也能有更好的體驗，代碼中特地添加了MSPointerOver和MSPointerOut事件，而且判斷當指針類型爲MSPOINTER_TYPE_MOUSE時纔去執行對應的鼠標事件。

　　這裏有幾個兼容性問題須要考慮：

　　1. Window.navigator.msPointerEnabled語句只會判斷瀏覽器是否支持MSPointer相關的事件，而不會判斷用戶的設備是否支持觸摸操做。目前只有在IE10上該對象不會返回undefined，其它版本的瀏覽器均視該對象不存在。若是你想判斷用戶的設備是否支持觸摸操做，應該使用Window.navigator.msMaxTouchPoints，若是該對象存在而且返回的結果大於1，則表示設備支持觸摸操做而且是支持多點觸摸的。

　　2. 在IE中，MSPointer相關的事件只會在瀏覽器支持的時候被觸發，若是頁面元素同時還帶有鼠標事件，則鼠標事件也會被同時觸發。

　　3. Webkit內核的瀏覽器支持touchstart事件，MSPointer相關的事件在這些瀏覽器上被視爲無效。經過e.preventDefault()語句能夠阻止鼠標默認行爲，從而不讓mouse hover事件觸發。

　　因此，上面代碼片斷同時兼容了<IE10和IE10，以及兼容在IE10上的觸摸和鼠標操做，和非IE內核的瀏覽器上的觸摸和鼠標操做。有一個狀況未考慮，那就是<IE10狀況下的觸摸操做，相信這種設備應該很難見到吧！

　　固然，你徹底能夠將鼠標的Click事件看成touch事件來處理，若是元素上除了Click以外沒有任何其它的事件。可是若是元素上還有 mouse hover相關的事件，則用戶在touch的同時觸發mouse hover，在這種狀況下你或許能夠考慮使用上面的邏輯來處理cross events。

其次就是各類尺度的不一樣寬高比（有時須要兼顧橫屏的設計）

    這個裏面涉及到分辨率的問題，這個我目前還不太懂就不班門弄斧了你們能夠看下這篇文章：

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 
關於橫豎屏的問題：

不管是ipad仍是安卓：

能夠在function裏面實裝切換後的事件，好比橫豎屏不一樣，畫面的佈局設計，css使用不一樣等等。

※你可使用window.orientation來判斷切換以後究竟是橫屏仍是豎屏。

可是： 關於上面的代碼，有幾項是須要注意的。

1， window.orientation

    通過測試，在ipad，和andriod系統上面，window.orientation來判斷橫豎屏用得值正好相反。

window.orientation值參考：

	window.orientation值	橫豎屏結果
ipad	90或者-90	橫屏
ipad	0 或者180	豎屏
Andriod	0 或者180	橫屏
Andriod	90或者-90	豎屏

2，如何判斷本身的設備是ipad仍是安卓

 

//自動判斷設備橫屏or豎屏
var autoFullscreen = function () {
 var supportsOrientationChange = "onorientationchange" in window,
 orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

 window.addEventListener(orientationEvent, function () {
  var ua = navigator.userAgent.toLowerCase();
  var deviceType = "";

  //determine device type
  if (ua.indexOf("ipad") > 0) {
   deviceType = "isIpad";
  } else if (ua.indexOf("android") > 0) {
   deviceType = "isAndroid";
  } else if (ua.indexOf("iphone") > 0) {
   deviceType = "isIphone";
  } else {
   return;
  }

  // 判斷橫豎屏  
  if ("isIpad" == deviceType) {
   if (Math.abs(window.orientation) == 90) {alert("我是ipad的橫屏");  }
   else {alert("我是ipad的豎屏");  }
  } else if ("isAndroid" == deviceType) {
   //縱屏 90 or -90 橫屏 0
   if (Math.abs(window.orientation) == 90) {alert("我是Android的縱屏");  }
   else {
    //document.webkitCancelFullScreen();

   alert("我是Android的橫屏");  
   }
  } else if ("isIphone" == deviceType) {
   if (Math.abs(window.orientation) == 90) {}
   else {}
  }
 }, false);
}

第三個就是觸摸和手機鍵盤的操做：這個裏面涉及不少內容：推薦你們看下這個文章：http://lilin.hn.cn/201402279837.html 總結的很全面；在這裏粘貼文章的一些內容：

如何關閉iOS中鍵盤自動大寫
咱們知道在iOS中，當虛擬鍵盤彈出時，默認狀況下鍵盤是開啓首字母大寫的功能的，根據某些業務場景，可能咱們須要關閉這個功能，移動版本webkit爲 input元素提供了autocapitalize屬性，經過指定autocapitalize=」off」來關閉鍵盤默認首字母大寫。

iOS中如何完全禁止用戶在新窗口打開頁面
有時咱們可能須要禁止用戶在新窗口打開頁面，咱們可使用a標籤的target=」_self「來指定用戶在新窗口打開，或者target屬性保持空，但 是你會發現iOS的用戶在這個連接的上方長按3秒鐘後，iOS會彈出一個列表按鈕，用戶經過這些按鈕仍然能夠在新窗口打開頁面，這樣的話，開發者指定的 target屬性就失效了，可是能夠經過指定當前元素的-webkit-touch-callout樣式屬性爲none來禁止iOS彈出這些按鈕。這個技 巧僅適用iOS對於Android平臺則無效。

如何解決盒子邊框溢出當你指定了一個塊級元素時，而且爲其定義了邊框，設置了其寬度爲100％。在移動設備開發過程當中咱們一般會對文本框定義爲寬度100％，將其定義爲塊級元 素以實現全屏自適應的樣式，但此時你會發現，該元素的邊框(左右)各1個像素會溢了文檔，致使出現橫向滾動條，爲解決這一問題，咱們能夠爲其添加一個特殊 的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。