本文整理了前端開發(fā)同學(xué)在開發(fā)手機(jī)頁面的時(shí)候遇到的各種問題，希望能夠?qū)鉀Q移動(dòng)前端開發(fā)中遇到的問題提供幫助。

Android WebView 簡介

在 Android 中提供了 WebView 控件用來展示網(wǎng)頁內(nèi)容。對(duì)于 WebView 需要注意：Android 的 WebView 的主要問題在于不同 Android 版本的 WebView 使用了不同的瀏覽器內(nèi)核和瀏覽器版本，所以需要進(jìn)行 Android 版本適配。

在 Android 4.4 以下(不包含 4.4)系統(tǒng) WebView 底層實(shí)現(xiàn)是采用 WebKit(http://www.webkit.org/) 內(nèi)核，而在 Android 4.4 及其以上 Google 采用了 chromium(http://www.chromium.org/) 作為系統(tǒng)WebView的底層內(nèi)核支持。

相關(guān)文章：

• Android 各個(gè)版本 WebView
• Android：最全面的 Webview 詳解
• 如何設(shè)計(jì)一個(gè)優(yōu)雅健壯的Android WebView？（上）
• 如何設(shè)計(jì)一個(gè)優(yōu)雅健壯的Android WebView？（下）

IOS 的 UIWebView 和 WKWebView 簡介

使用 IOS 的 WebView 需要注意：當(dāng)前頁面展示在 IOS 系統(tǒng)中時(shí)，存在兩種 WebView 環(huán)境：UIWebView 和 WKWebView。兩者是有一定差別的：

UIWebView 自 IOS2 就有，WKWebView 從 IOS8 才有，毫無疑問WKWebView 將逐步取代笨重的 UIWebView。

相關(guān)文章：

• iOS UIWebView 與 WKWebView
• iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（上）
• iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（中）
• iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（下）
• UIWebView與WKWebView

引用兩個(gè) WebView 在性能上的差異描述：

WKWebView相較于UIWebView在整體上有較大的提升，滿足OS上面使用同一套控件的功能，同時(shí)對(duì)整個(gè)內(nèi)存的開銷以及滾動(dòng)刷新率和JS交互做了優(yōu)化的處理。依據(jù)職責(zé)單一的原則，拆分成了三個(gè)協(xié)議去實(shí)現(xiàn)WebView的響應(yīng)，解耦了JS交互和加載進(jìn)度的響應(yīng)處理。WKWebView沒有做緩存處理,所以對(duì)網(wǎng)頁需要緩存的加載性能要求沒那么高的還是可以考慮UIWebView.

資料整理

下面是網(wǎng)上一些關(guān)于移動(dòng)前端開發(fā)的文章，我們按照類別進(jìn)行分類整理，并寫上文章的發(fā)布時(shí)間（老文章可能不適用當(dāng)前狀況）。以便遇到相應(yīng)問題時(shí)更好的去查閱，定位和解決問題。

使用指南

1. 如果遇到了移動(dòng)前端的問題，先按類別找到相應(yīng)文章列表，從中找解決方案。
2. 如若沒有則在整理 總結(jié)列表 中去找，很多小問題點(diǎn)都可以在里面找到
3. 如果還是無法解決可以通過評(píng)論與我溝通，一起努力找出解決方案。

第三方接口

• 移動(dòng)端H5多平臺(tái)分享實(shí)踐 (2018.1)
• 微信自定義分享鏈接和圖文 (2018.9)
• 微信掃碼提示在瀏覽器中打開的遮罩代碼 (2017.8)
• 微信、手機(jī)QQ和QQ空間的web app內(nèi)置分享API代碼 (2017.5)
• 微信開放JS-SDK，助力網(wǎng)頁開發(fā) (2016.8)
• 微信怎么設(shè)置在瀏覽器中打開APP下載鏈接 (2017.8)
• 微信打開網(wǎng)址添加在瀏覽器中打開提示遮罩 (2016.11)

屏幕適配

• 屏幕適配

  • 移動(dòng)端上的設(shè)計(jì)和適配 (2018.6)
  • 再聊移動(dòng)端頁面的適配 (2017.8)
  • 移動(dòng)設(shè)備強(qiáng)制橫屏顯示以及兼容問題 (2017.12)
  • 移動(dòng)前端自適應(yīng)適配布局解決方案和比較 （2017.12）
  • 移動(dòng)前端的一些坑和解決方法（外觀表現(xiàn)） （2015.7）

• 像素單位

  • 視窗單位在移動(dòng)端上的使用技巧 （2018.8）
  • 再談Retina下1px的解決方案 （2017.7）
  • 移動(dòng)端1px的邊框 （2016.2）

• flexible & rem & mata 適配方案

  • 使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配 （2015.11）
  • 移動(dòng)前端自適應(yīng)適配方法總結(jié) （2018.9）
  • 移動(dòng)端開發(fā)需要加的meta （2017.7）
  • rem是如何實(shí)現(xiàn)自適應(yīng)布局的？ （2017.8）
  • rem自適應(yīng)布局-移動(dòng)端自適應(yīng)必備:flexible.js （2018.9）
  • HTML meta標(biāo)簽總結(jié),HTML5 head meta屬性整理 （2017.7）

• vm & vh 適配方案

  • 【精】如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配 （2018.1）
  • 認(rèn)識(shí)視口單位vm、vh在網(wǎng)頁中的排版應(yīng)用 （2017.7）
  • 使用VH和VW實(shí)現(xiàn)真正的流體排版 （2017.7）

• iPhoneX

  • iPhone X的Web設(shè)計(jì) （2017.9）
  • iPhone X的缺口和CSS （2017.9）

緩存&存儲(chǔ)

• 移動(dòng)web緩存介紹 （2017.6）

touch 事件

• 移動(dòng)端 Touch 事件介紹 （2017.1）

flex布局

• Flex 布局新舊混合寫法詳解（兼容微信） （2015.11）
• flex在安卓4.3中的兼容方式 （2016.8）
• 移動(dòng)端CSS平分等分布局延伸 （2017.5）

position定位

• 你對(duì)Position的了解程度有多少? （2013.10）
• Web移動(dòng)端Fixed布局的解決方案 （2015.4）

優(yōu)化加速

• CSS3硬件加速技巧 （2015.12）
• 移動(dòng)網(wǎng)站性能優(yōu)化：網(wǎng)頁加載技術(shù)概覽 （2015.2）
• 必看！移動(dòng)前端開發(fā)優(yōu)化指南 (2015.1)

調(diào)試& 測(cè)試

• 移動(dòng)前端開發(fā)調(diào)試 （2015.1）

z-index層疊

• 深入理解CSS中的層疊上下文和層疊順序 （2016.1）

動(dòng)畫&樣式

• 手淘年貨節(jié)舞龍揭幕動(dòng)畫實(shí)戰(zhàn) （2016.1）
• requestAnimationFrame詳解以及無線頁面優(yōu)化 （2017.12）
• 不容錯(cuò)過的移動(dòng)前端頁面制作技巧 （2015.2）

整理總結(jié)

• 【精】移動(dòng)端重構(gòu)實(shí)戰(zhàn)系列1——基礎(chǔ)知識(shí) （2016.7）
• 【精】Mars 上的問題匯總和格式整理 (2016.6)
• 【精】手機(jī)端頁面在項(xiàng)目中遇到的一些問題及解決辦法（持續(xù)更新） (2018.6)
• 【精】 移動(dòng)Web資源整理 （2015.3）
• 分享手淘過年項(xiàng)目中采用到的前端技術(shù) (2018.2)
• 移動(dòng)端 Web 開發(fā)前端知識(shí)整理 （2015.5）
• 移動(dòng)前端知識(shí)總結(jié) （2016.3）
• 移動(dòng)端制作遇到的坑 （2015.12）
• 移動(dòng)端資源集錦 （2014.7）

相關(guān)工具庫項(xiàng)目及用法

• px2rem-loader -- Github
• iscroll -- Github
• 如何使用iscroll.js插件 （2016.2）
• Swipe -- Github
• Swipe-移動(dòng)觸摸滑動(dòng)輪播圖插件swipe.js （2018.9）

移動(dòng)前端系列內(nèi)容

• Mars —— 騰訊團(tuán)隊(duì)整理的一些移動(dòng)前端問題
• 移動(dòng)Web開發(fā) —— 有人整理的一系列移動(dòng)前端開發(fā)知識(shí)，有不少有價(jià)值的內(nèi)容。
• w3cplus-mobile —— 大漠老師整理的內(nèi)容質(zhì)量是比較高的。
• 前端開發(fā)博客-移動(dòng)前端開發(fā) —— 這是我找了兩天找到的最好的移動(dòng)前端開發(fā)內(nèi)容整理了。

整理心得

復(fù)制粘貼了這么多文章，簡單整理了一下移動(dòng)前端開發(fā)中存在的各類問題。

• Android 分為 webkit 和 chrome 兩個(gè)時(shí)代。
• IOS WebView 有 UIWebView 和 WKWebView 兩種。
• 移動(dòng)開發(fā)中經(jīng)常遇到要與微信、百度等第三方接口接入的情況。
• 移動(dòng)端的屏幕尺寸類型非常繁雜，所以需要進(jìn)行適配優(yōu)化。
• 屏幕適配現(xiàn)在有兩種主流方案：flexible 流和 vm 流。
  • flexible 流使用 rem 和 meta 來對(duì)尺寸進(jìn)行等比縮放。
  • vm 流使用 vm 和 vh 單位獲取來定義元素尺寸，具體可以參考vh,vw單位你知道多少？。
• 在適配時(shí)特別注意 iPhoneX 的劉海屏，有解決方案可以特殊處理劉海屏。
• 在使用屏幕適配后，特別要注意實(shí)現(xiàn) 1px 像素的顯示。
• retina 屏有時(shí)會(huì)出現(xiàn)元素顯示模糊的情況。
• 移動(dòng)端特有 touch 事件來處理屏幕的觸摸行為。
• flex 布局在 Android 4.3 及其之前的機(jī)型有兼容問題，需要做兼容處理。
• 在 IOS 中用 position:fixed 定位頂部和底部元素，在彈出軟鍵盤的時(shí)候會(huì)出現(xiàn) fixed 元素位置偏移和消失的問題。偏移問題建議改為 absolute 來實(shí)現(xiàn)，而消失問題建議使用滑動(dòng)完成后使用 JS 代碼實(shí)現(xiàn)屏幕點(diǎn)擊來調(diào)出元素顯示。
• IOS 的 WebView 有底部彈性功能，對(duì)于 fixed 和 absolute 定位有一些奇怪問題，建議使用 touchmove 事件監(jiān)聽攔截彈性功能。
• 頁面滑動(dòng)卡頓可以通過 setTimeout(event, 0) 來解決。
• 移動(dòng)端的調(diào)試是比較麻煩的，解決方案是使用 Charles 代理查看 log。
• 移動(dòng)端需要前端實(shí)現(xiàn)一些動(dòng)畫活動(dòng)頁面最好使用 CSS 的動(dòng)畫去實(shí)現(xiàn)性能更佳。
• 其他細(xì)節(jié)點(diǎn)請(qǐng)查閱 整理總結(jié) 前三篇文章。

最后

本文致力于實(shí)現(xiàn)快速定位和解決移動(dòng)前端問題，將會(huì)不斷更新。

如果有任何問題或者好的移動(dòng)前端開發(fā)資料，請(qǐng)?jiān)僭u(píng)論區(qū)留言一起討論。讓我們一起努力填平移動(dòng)前端中的坑。