移動端開發的注意事項

　　在互聯網營銷的時代下，大部分企業除了本身的官網以外，也有建設手機網站，在移動用戶比PC端用戶多的狀況下，企業又該如何去優化手機網站呢？其實手機網站建設都有一系列的注意事項，那麼手機網站建設過程當中注意事項都包含什麼呢？下面讓咱們一塊兒來看看吧！

 

首先咱們先說一下pc端和移動端的不一樣。

一： PC考慮的是瀏覽器的兼容性，而移動端開發考慮的更多的是手機兼容性，由於目前無論是android手機仍是ios手機，通常瀏覽器使用的都是webkit內核，因此說作移動端開發，更多考慮的應該是手機分辨率的適配，和不一樣操做系統的略微差別化。

二： 在部分事件的處理上，移動端多出來的事件是觸屏事件，而缺乏的是hover事件。 另外包括移動端彈出的手機鍵盤的處理，這樣的問題在PC端都是遇不到的。 

三： 在佈局上，移動端開發通常是要作到佈局自適應的，我使用的一直是rem佈局，感受很好。

四： 在動畫處理上，PC端因爲要考慮IE的兼容性，因此一般使用JS作動畫的通用性會更好一些，可是CSS3作了很大的犧牲， 而在手機端，若是要作一些動畫、特效等，第一選擇確定是CSS3， 既簡單、效率又高。

五：  微信的一些接口組好能去實現一遍，熟悉一下確定是有好處的，好比經過微信分享文章，title、description、icon等圖標的配置，這些仍是要會的。

 六： 百度地圖的一些API接口，也得去實現一下，這些對於移動端來講，LBS是一個很是重要的特性，因此地圖這塊確定是要了解的，在加上百度地圖這塊已是一個比較成熟的平臺了，因此學起來也比較容易。

7、通常PC端用jquery，移動端用zepto，由於移動端的流量仍是比較重要的，因此引入的資源或者插件，能小則小，一個30k的資源和一個80k的資源，在移動端的差異仍是挺大的。未壓縮的jquery是262kb，壓縮的jquey是83kb。未壓縮的zepto是54kb，壓縮的zepto只有9kb。

 

好吧，咱們下面再具體說幾樣PC端應該注意的地方。

1、佈局。

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

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

（1）居中

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

（2）多個元素水平排列

　　若是有四個元素須要水平排列，怎樣作到在任何移動端都可以漂亮的排列呢？很簡單，將每一個元素都設置成25%的寬度並居中，就能達到上述的效果。

  比較複雜一點的，若是是六個元素呢？通過簡單的計算，每一個元素都定義爲16%的寬度，這樣總共是16%*6=96%，剩下的4%再給兩邊的元素各加2%的外邊距就ok了。

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

2、HTML5標籤的使用

在開始編寫webapp時，建議前端工程師使用HTML5，而放棄HTML4，由於HTML5能夠實現一些HTML4中沒法實現的豐富的WEB應用程序的體驗，能夠減小開發者不少的工做量，固然了你決定使用HTML5前，必定要對此很是熟悉，要知道HTML5的新標籤的做用。好比定義一塊內容或文章區域可以使用section標籤，定義導航條或選項卡能夠直接使用nav標籤等等。 

3、放棄CSS float屬性，使用flax佈局

在項目開發過程當中能夠會遇到內容排列顯示的佈局，假如你碰見這樣的視覺稿，建議你放棄float，能夠直接使用display:inline-block。或者使用flax佈局。

4、自適應佈局模式

在編寫CSS時，我不建議前端工程師把容器（無論是外層容器仍是內層）的寬度定死。爲達到適配各類手持設備，我建議前端工程師使用自適應佈局模式（支付寶採用了自適應佈局模式），由於這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示，你無需再次考慮設備的分辨率。

5、學會使用webkit-box

上一節，咱們說過自適應佈局模式，有些同窗可能會問：如何在移動設備上作到徹底自適應呢？很感謝webkit爲display屬性提供了一個webkit-box的值，它能夠幫助前端工程師作到盒子模型靈活控制。

  6、如何解決盒子邊框溢出

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

  7、移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，每每會形成按鈕點擊延遲甚至是點擊失效。它的解決方案有：

fastclick能夠解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
觸摸事件的響應順序
一、ontouchstart 
二、ontouchmove 
三、ontouchend 
四、onclick
解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應

8、ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩。

 

  9、文字垂直居中

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

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

言歸正傳，如何解決上述問題呢？微信採用的是在須要垂直居中的容器外套一層div，使用盒模型強制將其內部容器垂直居中。 

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

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

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

大概就是這麼一些，更多的東西在不一樣的環境下要求也會不一樣，等待着你去開發和完善，但願個人文章對你有幫助。

歡迎樓下就坐，點贊加關注喲！