1.前言

 

到目前為止，網際網路行業裡，手機越來越智慧化，移動端佔有的比例越來越高，尤其實在電商，新聞，廣告，遊戲領域。使用者要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開發而言是一個挑戰，是一個難題，也是一個機遇。如何讓我們所開發的手機頁面能有更好的互動體驗，就是這篇文章的主旨：移動web開發問題和優化小結。這個只是我自己在開發的時候知道的坑，如果大家有遇到什麼別的坑，歡迎補充，或者覺得我哪裡寫錯了，歡迎指點！

 

2.Meta標籤

 

頁面在手機上顯示時，增加這個meta可以讓頁面強制讓文件的寬度與裝置的寬度保持1:1，並且文件最大的寬度比例是1.0，且不允許使用者通過點選或者縮放等操作對螢幕放大瀏覽。（這個在ios10以上的版本已經失效了，即使加了下面的meta，使用者雙擊，縮放還是可以縮放頁面。大家可以按照開發需求，參考下面的連線進行限制–ios10中禁止使用者縮放頁面）

 

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>

 

禁止ios上自動識別電話

 

<meta content="telephone=no" name="format-detection"/>

 

禁止android上自動識別郵箱

 

<meta content="email=no" name="format-detection"/>

 

下面兩個是針對ios上的safari上位址列和頂端樣式條的（我的手機是安卓，這個沒很仔細測試過，但是都有加上）

 

<meta name="apple-mobile-web-app-capable" content="yes"/>

  <!-- 聽說在ios7以上版本就沒效果了 -->

  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

  <!-- 可選default、black、black-translucent 但是我都是用black-->

 

3.打電話發簡訊

 

<a href="tel:020-11811922">打電話給:0755-10086</a>

<a href="10086">發簡訊給: 10086</a>

 

4.css3過渡動畫開啟硬體加速

 

ps：網上有說這個用了，手機的耗電量也會增加。我自己也在手機上粗略試過，確實有那麼一回事，平常看部落格，5分鐘左右少1%，用了硬體加速3分鐘左右就少1%，大家注意合理使用。

 

.translate3d{

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

}

 

說到這裡，也順便說下動畫或者過渡的兩個建議：

1.在手機上（其實PC也是一樣）。CSS3動畫或者過渡儘量使用transform和opacity來實現動畫，不要使用left和top。

2.動畫和過渡能用css3解決的，就不要使用js。如果是複雜的動畫可以使用css3+js（或者html5+css3+js）配合開發，效果只有想不到，沒有做不到。

 

5.移動端click螢幕產生200-300 ms的延遲響應

 

click事件因為要等待確認是否是雙擊事件，會有300ms的延遲（兩次點選事件間隔小於300ms就認為是雙擊），體驗並不好。現在的解決方案，第一個就是採用touchstart或者touchend代替click。或者封裝tap事件來代替click 事件，所謂的tap事件由touchstart事件+ touchmove（判斷是否是滑動事件）+touchend事件封裝組成。

 

關於touch和滑鼠事件的延遲說明，我引用葉小釵大神部落格裡面的一張圖片，如下

 

 

在手機上，click的延遲將近400ms。對於使用者而言，是一個很嚴重的延遲了！所以在手機上，並不建議用click。

 

附上葉小釵大神的原文–手持裝置點選響應速度，滑鼠事件與touch事件的那些事

 

6.圖片優化

 

6-1.base64編碼圖片替換url圖片

 

這個應該沒什麼好解釋的，就是能不發請求的就不要發，對於一些小圖示（我這做法是把8K以下的圖示都轉換成base64）之類的，可以將圖片用base64，來減少請求的傳送。尤其是在移動端，請求顯得特別珍貴，在網速的不好的情況下，請求就是珍貴中的珍貴。

 

6-2.圖片壓縮

 

對於整個網站來說，圖片是最佔流量的資源之一，能不使用就不適用，圖示可是使用base64編碼，字型圖示代替，SVG等來代替，使用就要選擇最合適的格式，合適的尺寸，然後壓縮–這裡推薦騰訊推出的智圖。

 

PS：過度壓縮圖片大小影響圖片顯示效果，可能會使得圖片變得模糊，一般來說，品質在60左右就差不多了！

 

6-3.圖片懶載入

 

首屏載入的快慢，直接影響使用者的體驗，建議將非首屏的圖片資源放到使用者需要時才載入。這樣可以大大優化首屏載入，減少首屏載入所需要的時間！

ps：懶載入要使用js頻繁操作dom，期間會導致大量重繪渲染，影響效能。

 

6-4.img還是background

 

圖片的展示方式有兩種，一種是以圖片標籤顯示，一種是以背景圖片顯示！下面寫了這兩者的區別。

 

img:html中的標籤img是網頁結構的一部分會在載入結構的過程中和其他標籤一起載入。

background：以css背景圖存在的圖片background會等到結構載入完成（網頁的內容全部顯示以後）才開始載入

也就是說，網頁會先載入標籤img的內容，再載入背景圖片background引用的圖片。引入一張圖片，那麼在這個圖片載入完成之前，img後的內容不會顯示。而用background來引入同樣的圖片，網頁結構和內容載入完成之後，才開始載入背景圖片，網頁內容能正常瀏覽，但是看不到背景圖片。至於這兩種，大家按照習慣，需求等權重因素選擇！

 

7.快速回彈滾動

 

在ios上，如果存在區域性滾動，就要加這個屬性了！如果不加，滾動會很慢，看起來也會有一卡一卡的感覺。

 

-webkit-overflow-scrolling: touch;

 

但是，加上了這個，在ios上會產生bug。

 

如下佈局

 

 

.fb-box是一個大div，包含著頁面上的所有元素,包括所看到的那個彈窗.dialog-img，並且設定了height:100%;-webkit-overflow-scrolling:touch;position:relative;

 

定位需要，-webkit-overflow-scrolling:touch;也需要，但是這樣設定，在ios上會有一個bug,頁面滾動一定的距離後，點選了顯示彈窗，再關閉的話，就會發現，彈窗的一部分還“留在頁面上”。

 

 

解決方案1：

 

把彈窗的div和.fb-box以兄弟節點的方式佈局，在外層再弄一個div包住,這個坑就算爬起來了，效果如下

 

 

 

解決方案2：

.fb-box去掉position:ralative;。讓彈窗的div參考body定位！

 

8.謹慎使用fixed

 

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位，會發生元素錯位（滾動一下又恢復），有時候會出現閃屏的效果。我也搜過一下這個問題，發現別人還遇到了我沒遇到過的問題！真是，哎~。所以在手機上，不建議用fixed定位，使用absolute代替！如果一定要用，寫好了之後，一定要多測試幾次！

 

9.消除transition閃屏

 

PS：這個問題，我近段時間開發，貌似不加上這個程式碼也沒什麼影響，但是以前就是要求加，就加上了，現在沒加上，也沒反饋有什麼問題！

 

.no-flash {

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;

    -webkit-perspective: 1000;

}

 

10.ios系統中去掉元素被觸控時產生的半透明灰色遮罩

 

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

 

11.ios中去掉預設input預設樣式

 

input,button,textarea{-webkit-appearance: none;}

 

12.左右滑動，避免頁面跟著滑動

 

這個細節是我在基於vue開發焦點圖的時候遇到的，後來自己找不到方法，直接在sf上提問了，大家可以去參考下：移動端輪播圖，上下滑動的時候不觸發頁面的滾動

 

ps：滑動我沒有使用什麼庫，是我根據touchstart和touchend的移動距離來判斷是左右滑動或者上下滑動！

 

13.vue-router與微信分享的問題

 

分享傳送的連線是下面這樣

 

http://www.example.com/dist/html#/index?utm_source=share

http://www.example.com/dist/html#/index.html/index?utm_source=share

 

但是分享之後的實際連線是下面這樣的，別人點選的分享出去的連結，就會打不開網頁

 

http://www.example.com/dist/html?from=xxxx#/index&utm_source=share

http://www.example.com/dist/html#/index.html?from=xxxx/index&utm_source=share    

 

解決方案

 

1.自定義分享URL地址

2.避免使用單檔案應用

 

14.iphoneX的齊劉海

 

蘋果公司新出的手機，出了沒多久，段子手就坐不住了，各種調侃，但是今天我們聊那個！聊下iphoneX給前端帶來的困擾，也是給ui帶來的困擾吧！下面引入大漠，張鑫旭等人對iphoneX齊劉海的一個解決方案！避免到時候跳坑！

 

iPhone X的缺口和CSS（https://www.w3cplus.com/css/the-notch-and-css.html）

藉助CSS Shapes實現元素滾動自動環繞iPhone X的劉海（http://www.zhangxinxu.com/wordpress/2017/09/css-shapes-outside-iphone-x-head/）

剖析 iOS 11 網頁適配問題（http://mp.weixin.qq.com/s/6YSN3g86jcU22xwcloNk3A）

手機管家iPhoneX的適配總結（https://segmentfault.com/a/1190000011308923）