分享人：廣州華軟 佐羅
一. 前言
會了PC端開發就會了移動端開發，這個說法沒錯，雖然移動端開發避開了IE相容適配的坑，但是移動端不同系統環境，不同螢幕尺寸的適配還是需要謹慎。下面就說一下移動端開發的一些坑與技巧。
二. 目錄
1. 移動端開發（定義）
2. 移動端開發總結的作用（作用）
3. 移動端開發小結（過程）
3.1 meta標籤
3.2適配移動端
3.3 點選延遲
3.4 上下拉動滾動條時卡頓、慢
4.總結
三. 移動端開發
PC 端頁面開發需要考慮更多的相容性問題，ie、谷歌、火狐等瀏覽器各自核心不同。
移動端頁面開發基本不用考慮這種瀏覽器間的相容問題，手機上的瀏覽器絕大部分是webkit核心的（webkit 的天下），但是需要考慮螢幕解析度。
四. 踩坑
移動端有許許多多的莫名奇妙坑，在開發過程中指不定哪個節點就踩上了。坑移動的坑每天都有人在踩，在這裡總結了一下比較實用的技巧，給正在踩坑的開發者一些經驗，能快速定位問題並解決問題節省開發時間
五. 移動端開發小結
5.1 Meta標籤
meta標籤，meta標籤在開發webapp時起到非常重要的作用
第一個meta標籤表示：強制讓文件的寬度與裝置的寬度保持1:1，並且文件最大的寬度比例是1.0，且不允許使用者點選螢幕放大瀏覽； 尤其要注意的是content裡多個屬性的設定一定要用分號+空格來隔開，如果不規範將不會起作用。如果缺少該meta標籤web app文件的寬度與裝置的寬度不是1:1的比例，頁面將可以橫向拖動，造成極差的使用者體驗。
5.2 適配移動端
移動端頁面開發基本不用考慮這種瀏覽器間的相容問題，但是需要考慮螢幕解析度。目前市場上手機廠商，蘋果iOS系統是系列性的還說得過去，安卓系統是開源，有華為，小米等廠商，螢幕的解析度可謂是層出不窮，開發過程又如何去適配這些解析度呢？
1. 媒體查詢
這樣我們可以根據不同的螢幕大小來切換響應的佈局。
目前電商網站已經不再使用媒體查詢了，主要是通過不同螢幕大小來判斷使用裝置，載入不同的檔案實現，而一些新聞類網站還在使用。但是不推薦使用：
程式碼量大，維護不方便。
為兼顧大屏或高清裝置，會造成其他資源浪費，特別是載入圖片資源。
為了兼顧移動端和 PC 端各自響應式的展示效果，難免會損失各自特有的互動方式。
2. js動態設定 html 的 font-size
新增動態設定 html 的 font-size的js
使用說明：例如設計稿的寬度是 750px，html的font-size設定為100px；如果一個元素的實際寬高都為 100px，那麼如果使用 rem 為單位，寬高便都為 1rem。
有興趣開發者們可以去研究一下淘寶提供的適配方案，當然還有其他適配方案
5.3 點選延遲
關於移動端的300毫秒的點選延遲，可以使用fastclick.js來解決，首先引入fastclick，之後再引入這段程式碼如果是引入了jQuery可以直接引入
5.4 Retina屏的1px邊框
還有其他方法，具體的可以百度1px邊框
六. 總結
以上的開發技巧本人一直在使用，親測有效。移動端開發有許許多多的坑，當踩到坑時候還需個人找資料能力，藉助前者的經驗快速查詢到問題。