上個禮拜，剛入職就接到一個移動端的活動頁面專案，重點還是要相容微信瀏覽器，相容主流機型。在這之前，我所做的都是PC端的，想來兩者差別不大，實際動手時遇到的坑還是蠻多的。時間過去的有點久，我也不能把每個坑都列出來，只能寫些印象深刻的。

  1、關於頁面背景

     由於手機端機型眾多，各種機型螢幕大小不同，讓美工針對每個機型設計背景圖顯然是不合理的。當時的想法是，給一張iPhone6的，width:100%,height:100%。我把他鋪滿整個螢幕就完事了。實際測試中，發現是鋪滿了，但是寬高百分百會把圖片進行相對螢幕大小的拉伸，搞得背景圖在一些大屏一些小屏手機中很醜。

   解決方法：手機寬度都差不了多少，可以把背景width:100%，高度自適應，這樣在每個螢幕中顯示的背景圖就不會有拉伸現象了。

 2、關於頁面佈局

   由於微信瀏覽器是不相容flex的，所以只能用定位方法佈局。還是因為機型的不同，選擇了百分比佈局的方法。不過這個方法的生產效率真的是低下。所以我建議，一般可以寫死的地方就寫死。還有一點，儘量不要使用margin來進行佈局，這樣會引起整個頁面移動，上下端出現留白。具體原因我也不太清楚。

 3、關於點選事件

    手機端的點選事件得用touch事件來替換click事件。一般點選事件都可以用touchend來完成。

 4、關於環形進度條的實現

   很多頁面跳轉的時候會出現一個百分比的圓，中間是百分數。我們美工給的圖就是一個顏色漸變的圓環，所以實現只要把這張圖進行旋轉就好了。

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

   很多地方都有，在點選一個按鈕後會彈出一個列表，然後原先的頁面變暗。

   具體實現：在原本頁面的DIV後面加一個同級別的DIV，大小引數都一樣，然後給這個DIV設定

 background-color: rgba(0, 0, 0, .3);z-index:100;
 

 6、鍵盤撥出導致頁面容器壓縮

   手機端的鍵盤在一些瀏覽器中是不佔容器的，但是在一些瀏覽器中是佔容器的（一部分安卓自帶瀏覽器，谷歌瀏覽器）。導致整個頁面被壓縮，由於我採用的是百分比佈局（這種佈局真的不推薦）而且高度自適應，所以整個頁面都被壓成一團。

   解決方法：當時想，既然高度被壓縮了就把高度設死就完了。後來意識到，不同機型高度是不同的，一種機型在不同瀏覽器中容器的高度也是不一樣的，有一些瀏覽器上面的位址列也會佔用容器的高度，這樣設死值的話會導致一個螢幕顯示不完全的結果。後來想到，可以每次載入頁面的時候獲取一次容器高度，然後直接把高度設死就行了。

(function(){
    var cliwidth = document.documentElement.clientWidth; 
    var cliheight = document.documentElement.clientHeight;
    if(cliheight < 504){
        cliheight = 504;//在iPhone5
    }
    $('#background').width(cliwidth);
    $('#background').height(cliheight);   
})();

 7、關於touchend事件在有彈窗時候會緊接著觸發彈窗中該位置的點選事件

   這個問題怎麼說呢。emmmm，當時的需求是點選一個按鈕出來一個列表，然後列表中是一堆超連結。導致的是，如果我點選的按鈕位置在彈窗中有超連結的話會導致超連結的觸發。那時候試了阻止事件冒泡還是沒用。後來仔細一想，就把超連結的點選事件取消，然後在彈窗出現的時候在恢復點選事件。

$("a").attr("onclick","return false");

$("a").removeAttr("onclick");

        setTimeout(function(){
        $("a").removeAttr("onclick");
        },1000);

  8、關於點選按鈕然後複製一段文字來剪下框

   有一個clipboard.js，可以實現這個功能，但是在移動端並不能實現，好像他封裝的時間觸發方式只有click，具體我也沒太仔細看原始碼。不過在PC端是可以實現的。

  大概只記得這些了，一直沒時間寫東西，拖拖拖就拖了一個禮拜。最近在學React不得不說，React的元件模式真的是非常好的，每個前端或早或晚的都會學React，早學早開心！推薦英文頭疼的同學看下React小書，從專案入手，還配有一些課後練習。