2018 年最新的移動前端資料整理（不斷更新）

本文整理了前端開發同窗在開發手機頁面的時候遇到的各類問題，但願可以對解決移動前端開發中遇到的問題提供幫助。

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.

資料整理

下面是網上一些關於移動前端開發的文章，咱們按照類別進行分類整理，並寫上文章的發佈時間（老文章可能不適用當前情況）。以便遇到相應問題時更好的去查閱，定位和解決問題。

使用指南

1. 若是遇到了移動前端的問題，先按類別找到相應文章列表，從中找解決方案。
2. 如若沒有則在整理 總結列表 中去找，不少小問題點均可以在裏面找到
3. 若是仍是沒法解決能夠經過評論與我溝通，一塊兒努力找出解決方案。

第三方接口

• 移動端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 的動畫去實現性能更佳。
• 其餘細節點請查閱 整理總結 前三篇文章。

最後

本文致力於實現快速定位和解決移動前端問題，將會不斷更新。

若是有任何問題或者好的移動前端開發資料，請再評論區留言一塊兒討論。讓咱們一塊兒努力填平移動前端中的坑。