移動前端的坑

先介紹一下項目環境，前端工具使用fis-plus，主要使用了zepto插件。總體架構比較簡單。

  在這裏咱們不討論viewport佈局（使用viewport貌似坑會少不少，可是因爲條件限制，有時只能使用原始方法開發），下面進入正題：

  零、調試工具

  推薦你們在調試移動端頁面時使用chrome的toggle device mode。

  

        在此模式下能夠隨意切換市面上的各類主流機型。不過真機與模擬環境仍是有必定差距，在後期測試階段你將會深切地感覺到這一點，木哈哈哈。

  1、佈局。

  PC端和移動端的佈局的思路仍是比較不一樣的。若是最初沒有考慮好移動端佈局的思路，在後期兼容性等完善過程當中將會超級痛苦。

  在PC端咱們很常見的一種佈局思路以下：將網頁主題設爲固定寬度，居中，並定義最小寬度，可適配各類大小的PC端屏幕。因爲PC端可視範圍較大，因此上述方法可行，可是移動端徹底不一樣，移動端的屏幕自己就比較小，因此咱們必須所有利用起來。移動端的頁面通常來講結構都會比較簡單，下面分結構介紹兩種佈局：

（1）居中

  通常banner或者按鈕等元素都會定義爲居中佈局。在ps中量好外邊距後，直接給元素設置margin，如：margin: 0 10px; 無需設置寬度，元素會自動撐開，且在任何屏幕上都會有相同10px的左右外邊距。

（2）多個元素水平排列

  好比上圖中經常使用網址中的諮詢、hao12三、圖片、鳳凰四個一排，怎樣作到在任何移動端都可以漂亮的排列呢？很簡單，將每一個元素都設置成25%的寬度並居中，就能達到上述的效果。

  比較複雜一點的，如上圖中第一排的新聞、小說等圖標是怎麼樣佈局的呢？通過簡單的計算，每一個元素都定義爲16%的寬度，這樣總共是16%*6=96%，剩下的4%再給兩邊的元素各加2%的外邊距就ok了。

  若是你想實現更加完美的效果，好比使圖片跟隨手機屏幕的大小變化，則能夠給圖片設置相對寬度，並使高度自動伸縮，則能夠達到以上效果。

2、像素

  因爲如今須要多移動端使用的是retina視網膜屏幕，因此在看頁面設計圖時，須要按照原型圖尺寸的一半進行長度賦值。這裏就會引出一個十分蛋疼的問題：當設計圖有1px的線條或border時，咱們該怎麼辦！

有人說了，iOS 8 和 OS X Yosemite 支持 0.5px 的邊框。我只能說呵呵，光有兩個系統是木有用的。

告訴你們一個目前來看最佳方案：

僞類 + transform

原理是把原先元素的 border 去掉，而後利用:before或者:after重作 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新作的 border 絕對定位。

.test:before {

    content: " ";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 1px;

    border-top: 1px solid #dadad9;

    -webkit-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: scaleY(0.5);

    -ms-transform: scaleY(0.5);

    transform: scaleY(0.5);

}

在調試兼容性的過程當中可能會遇到各類麻煩，不過耐心的慢慢調試，頁面必定會實現完美的1像素，你也會煉成鈦合金像素眼。

3、點擊事件

在移動端的點擊事件中，若是使用咱們異常熟悉的click事件，確實不是一個最佳方案。由於click事件由於種種歷史緣由，有300ms的延時。因此咱們可使用tap事件。

使用tap事件你能夠能在開發過程當中又會遇到一個蛋疼的問題：點擊穿透現象。若是頁面上彈出一個dialog，而且，在肯定按鈕的下一層的這個位置正好有一個綁定了點擊事件的元素，那就熱鬧了，點擊一下，能夠觸發兩個事件。

如何避免呢？介紹兩個簡單的方法，一個是將tap換成click，或者在事件最後加上preventDefault();防止冒泡。

4、空div在低端安卓顯示不出來問題

在開發過程當中發現了這樣一個奇怪的問題：有些無內容的容器已經設置了高度與寬度，也設置了背景圖，可是在安卓低端機上就是沒法顯示。目前解決方案自我感受很是山寨：將高度或寬度換成對應的padding，將容器撐起來。雖然山寨，可是實踐驗證了，這種方法很是好用。

5、外邊距合併

仍是安卓的低端機上的問題，（貌似在低版本的PC端瀏覽器也會出現，可是不多遇到），外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

這個狀況下對元素使用overflow:hidden;就會消除外邊距的合併，百試百靈。

6、display使用table-cell等表格佈局致使頁面錯亂。

仍然是安卓的低端機上的問題。在開發頁面過程當中我也不多使用表格佈局，出現問題的狀況會比較多。正常可使用inline-block,配合float:left;通常不會出現問題。

7、緩存

html5中的web storage分爲localStorage與sessionStorage。

localStorage用於持久化的本地存儲。若是用戶不主動清空數據，數據永遠不會過時。

sessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問，當回話結束時，數據也隨之銷燬。所以，sessionStorage不是一種持久化的本地存儲，僅僅是繪畫級別的存儲。

8、文字垂直居中

在PC端開發時，比較經常使用的方法爲設置相同的height與line-height。可是在移動端，若是在某些容器中使用此類方法，你會發現文字在某些機型上跑偏了二里地。

從這個現象能夠看出，移動端的瀏覽器對於css的解析確實沒有PC端完善。原來覺得IE三兄弟（IE六、IE七、IE8）是最坑的了，沒想到被移動端的無數個兄弟完爆了。

言歸正傳，如何解決上述問題呢？微信採用的是在須要垂直居中的容器外套一層div，使用盒模型強制將其內部容器垂直居中。具體實現可參見 http://weui.github.io/weui 微信樣式庫。

另外就是在input中儘可能不使用line-height，避免引發placeholder垂直位置偏移。

9、頁腳元素避免使用絕對定位。

移動端頁面常常會有頁腳放置copyright或logo的需求，這時千萬不要使用position:absolute;bottom: 20px; 這種坑爹佈局。若是這個頁面存在輸入需求，當調起軟鍵盤時，你定義的這個絕對位置元素就會蹦躂到軟鍵盤上方的頁面上。

可能你會以爲，若是頁面沒有輸入框，就不存在這種問題了吧。too young too naive。世界上還有一種奇葩機型，返回鍵是設置的在頁面底部的啊！！！你只要一寫絕對定位在頁腳底部的佈局，百分百中招啊！

因此咱們儘可能不要使用上面的那種佈局，若是硬要達到距離頁面底部固定高度的效果，能夠動態計算頁面最小高度並進行賦值~