本文整理了前端開發同學在開發手機頁面的時候遇到的各種問題，希望能夠對解決移動前端開發中遇到的問題提供幫助。
Android WebView 簡介
在 Android 中提供了 WebView 控制元件用來展示網頁內容。對於 WebView 需要注意：Android 的 WebView 的主要問題在於不同 Android 版本的 WebView 使用了不同的瀏覽器核心和瀏覽器版本，所以需要進行 Android 版本適配。
在 Android 4.4 以下(不包含 4.4)系統 WebView 底層實現是採用 WebKit(www.webkit.org/) 核心，而在 Android 4.4 及其以上 Google 採用了 chromium(www.chromium.org/) 作為系統WebView的底層核心支援。
相關文章：
- Android 各個版本 WebView
- Android：最全面的 Webview 詳解
- 如何設計一個優雅健壯的Android WebView？（上）
- 如何設計一個優雅健壯的Android WebView？（下）
IOS 的 UIWebView 和 WKWebView 簡介
使用 IOS 的 WebView 需要注意：當前頁面展示在 IOS 系統中時，存在兩種 WebView 環境：UIWebView 和 WKWebView。兩者是有一定差別的：
UIWebView 自 IOS2 就有，WKWebView 從 IOS8 才有，毫無疑問WKWebView 將逐步取代笨重的 UIWebView。
相關文章：
- iOS UIWebView 與 WKWebView
- iOS中UIWebView與WKWebView、JavaScript與OC互動、Cookie管理看我就夠（上）
- iOS中UIWebView與WKWebView、JavaScript與OC互動、Cookie管理看我就夠（中）
- iOS中UIWebView與WKWebView、JavaScript與OC互動、Cookie管理看我就夠（下）
- UIWebView與WKWebView
引用兩個 WebView 在效能上的差異描述：
WKWebView相較於UIWebView在整體上有較大的提升，滿足OS上面使用同一套控制元件的功能，同時對整個記憶體的開銷以及滾動重新整理率和JS互動做了優化的處理。依據職責單一的原則，拆分成了三個協議去實現WebView的響應，解耦了JS互動和載入進度的響應處理。WKWebView沒有做快取處理,所以對網頁需要快取的載入效能要求沒那麼高的還是可以考慮UIWebView.
資料整理
下面是網上一些關於移動前端開發的文章，我們按照類別進行分類整理，並寫上文章的釋出時間（老文章可能不適用當前狀況）。以便遇到相應問題時更好的去查閱，定位和解決問題。
使用指南
- 如果遇到了移動前端的問題，先按類別找到相應文章列表，從中找解決方案。
- 如若沒有則在整理
總結列表中去找，很多小問題點都可以在裡面找到 - 如果還是無法解決可以通過評論與我溝通，一起努力找出解決方案。
第三方介面
- 移動端H5多平臺分享實踐 (2018.1)
- 微信自定義分享連結和圖文 (2018.9)
- 微信掃碼提示在瀏覽器中開啟的遮罩程式碼 (2017.8)
- 微信、手機QQ和QQ空間的web app內建分享API程式碼 (2017.5)
- 微信開放JS-SDK，助力網頁開發 (2016.8)
- 微信怎麼設定在瀏覽器中開啟APP下載連結 (2017.8)
- 微信開啟網址新增在瀏覽器中開啟提示遮罩 (2016.11)
螢幕適配
-
螢幕適配
- 移動端上的設計和適配 (2018.6)
- 再聊移動端頁面的適配 (2017.8)
- 移動裝置強制橫屏顯示以及相容問題 (2017.12)
- 移動前端自適應適配佈局解決方案和比較 （2017.12）
- 移動前端的一些坑和解決方法（外觀表現） （2015.7）
-
畫素單位
- 視窗單位在移動端上的使用技巧 （2018.8）
- 再談Retina下1px的解決方案 （2017.7）
- 移動端1px的邊框 （2016.2）
-
flexible & rem & mata 適配方案
- 使用Flexible實現手淘H5頁面的終端適配 （2015.11）
- 移動前端自適應適配方法總結 （2018.9）
- 移動端開發需要加的meta （2017.7）
- rem是如何實現自適應佈局的？ （2017.8）
- rem自適應佈局-移動端自適應必備:flexible.js （2018.9）
- HTML meta標籤總結,HTML5 head meta屬性整理 （2017.7）
-
vm & vh 適配方案
- 【精】如何在Vue專案中使用vw實現移動端適配 （2018.1）
- 認識視口單位vm、vh在網頁中的排版應用 （2017.7）
- 使用VH和VW實現真正的流體排版 （2017.7）
-
iPhoneX
- iPhone X的Web設計 （2017.9）
- iPhone X的缺口和CSS （2017.9）
快取&儲存
- 移動web快取介紹 （2017.6）
touch 事件
- 移動端 Touch 事件介紹 （2017.1）
flex佈局
- Flex 佈局新舊混合寫法詳解（相容微信） （2015.11）
- flex在安卓4.3中的相容方式 （2016.8）
- 移動端CSS平分等分佈局延伸 （2017.5）
position定位
- 你對Position的瞭解程度有多少? （2013.10）
- Web移動端Fixed佈局的解決方案 （2015.4）
優化加速
- CSS3硬體加速技巧 （2015.12）
- 移動網站效能優化：網頁載入技術概覽 （2015.2）
- 必看！移動前端開發優化指南 (2015.1)
除錯& 測試
- 移動前端開發除錯 （2015.1）
z-index層疊
- 深入理解CSS中的層疊上下文和層疊順序 （2016.1）
動畫&樣式
- 手淘年貨節舞龍揭幕動畫實戰 （2016.1）
- requestAnimationFrame詳解以及無線頁面優化 （2017.12）
- 不容錯過的移動前端頁面製作技巧 （2015.2）
整理總結
- 【精】移動端重構實戰系列1——基礎知識 （2016.7）
- 【精】Mars 上的問題彙總和格式整理 (2016.6)
- 【精】手機端頁面在專案中遇到的一些問題及解決辦法（持續更新） (2018.6)
- 【精】 移動Web資源整理 （2015.3）
- 分享手淘過年專案中採用到的前端技術 (2018.2)
- 移動端 Web 開發前端知識整理 （2015.5）
- 移動前端知識總結 （2016.3）
- 移動端製作遇到的坑 （2015.12）
- 移動端資源集錦 （2014.7）
相關工具庫專案及用法
- px2rem-loader -- Github
- iscroll -- Github
- 如何使用iscroll.js外掛 （2016.2）
- Swipe -- Github
- Swipe-移動觸控滑動輪播圖外掛swipe.js （2018.9）
移動前端系列內容
- Mars —— 騰訊團隊整理的一些移動前端問題
- 移動Web開發 —— 有人整理的一系列移動前端開發知識，有不少有價值的內容。
- w3cplus-mobile —— 大漠老師整理的內容質量是比較高的。
- 前端開發部落格-移動前端開發 —— 這是我找了兩天找到的最好的移動前端開發內容整理了。
整理心得
複製貼上了這麼多文章，簡單整理了一下移動前端開發中存在的各類問題。
- Android 分為 webkit 和 chrome 兩個時代。
- IOS WebView 有 UIWebView 和 WKWebView 兩種。
- 移動開發中經常遇到要與微信、百度等第三方介面接入的情況。
- 移動端的螢幕尺寸型別非常繁雜，所以需要進行適配優化。
- 螢幕適配現在有兩種主流方案：flexible 流和 vm 流。
- flexible 流使用 rem 和 meta 來對尺寸進行等比縮放。
- vm 流使用 vm 和 vh 單位獲取來定義元素尺寸，具體可以參考vh,vw單位你知道多少？。
- 在適配時特別注意 iPhoneX 的劉海屏，有解決方案可以特殊處理劉海屏。
- 在使用螢幕適配後，特別要注意實現 1px 畫素的顯示。
- retina 屏有時會出現元素顯示模糊的情況。
- 移動端特有 touch 事件來處理螢幕的觸控行為。
- flex 佈局在 Android 4.3 及其之前的機型有相容問題，需要做相容處理。
- 在 IOS 中用
position:fixed定位頂部和底部元素，在彈出軟鍵盤的時候會出現 fixed 元素位置偏移和消失的問題。偏移問題建議改為 absolute 來實現，而消失問題建議使用滑動完成後使用 JS 程式碼實現螢幕點選來調出元素顯示。 - IOS 的 WebView 有底部彈性功能，對於 fixed 和 absolute 定位有一些奇怪問題，建議使用 touchmove 事件監聽攔截彈性功能。
- 頁面滑動卡頓可以通過 setTimeout(event, 0) 來解決。
- 移動端的除錯是比較麻煩的，解決方案是使用 Charles 代理檢視 log。
- 移動端需要前端實現一些動畫活動頁面最好使用 CSS 的動畫去實現效能更佳。
- 其他細節點請查閱
整理總結前三篇文章。
最後
本文致力於實現快速定位和解決移動前端問題，將會不斷更新。
如果有任何問題或者好的移動前端開發資料，請再評論區留言一起討論。讓我們一起努力填平移動前端中的坑。