摘要：如何讓我們所開發(fā)的手機(jī)頁面能有更好的交互體驗(yàn)，就是這篇文章的主旨移動(dòng)開發(fā)問題和優(yōu)化小結(jié)。關(guān)于和鼠標(biāo)事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機(jī)上，的延遲將近。

到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機(jī)越來越智能化，移動(dòng)端占有的比例越來越高，尤其實(shí)在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來越高，網(wǎng)站功能越來越好，效果越來越炫酷，這就要求我們產(chǎn)品質(zhì)量越來越高，web前端開發(fā)而言是一個(gè)挑戰(zhàn)，是一個(gè)難題，也是一個(gè)機(jī)遇。如何讓我們所開發(fā)的手機(jī)頁面能有更好的交互體驗(yàn)，就是這篇文章的主旨：移動(dòng)web開發(fā)問題和優(yōu)化小結(jié)。這個(gè)只是我自己在開發(fā)的時(shí)候知道的坑，如果大家有遇到什么別的坑，歡迎補(bǔ)充，或者覺得我哪里寫錯(cuò)了，歡迎指點(diǎn)！

頁面在手機(jī)上顯示時(shí)，增加這個(gè)meta可以讓頁面強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶通過點(diǎn)擊或者縮放等操作對屏幕放大瀏覽。（這個(gè)在ios10以上的版本已經(jīng)失效了，即使加了下面的meta，用戶雙擊，縮放還是可以縮放頁面。大家可以按照開發(fā)需求，參考下面的連接進(jìn)行限制--ios10中禁止用戶縮放頁面）

禁止ios上自動(dòng)識(shí)別電話

禁止android上自動(dòng)識(shí)別郵箱

下面兩個(gè)是針對ios上的safari上地址欄和頂端樣式條的（我的手機(jī)是安卓，這個(gè)沒很仔細(xì)測試過，但是都有加上）

打電話給:0755-10086
發(fā)短信給: 10086

ps：網(wǎng)上有說這個(gè)用了，手機(jī)的耗電量也會(huì)增加。我自己也在手機(jī)上粗略試過，確實(shí)有那么一回事，平常看博客，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);
}

說到這里，也順便說下動(dòng)畫或者過渡的兩個(gè)建議：
1.在手機(jī)上（其實(shí)PC也是一樣）。CSS3動(dòng)畫或者過渡盡量使用transform和opacity來實(shí)現(xiàn)動(dòng)畫，不要使用left和top。
2.動(dòng)畫和過渡能用css3解決的，就不要使用js。如果是復(fù)雜的動(dòng)畫可以使用css3+js（或者h(yuǎn)tml5+css3+js）配合開發(fā)，效果只有想不到，沒有做不到。

click事件因?yàn)橐却_認(rèn)是否是雙擊事件，會(huì)有300ms的延遲（兩次點(diǎn)擊事件間隔小于300ms就認(rèn)為是雙擊），體驗(yàn)并不好。現(xiàn)在的解決方案，第一個(gè)就是采用touchstart或者touchend代替click。或者封裝tap事件來代替click 事件，所謂的tap事件由touchstart事件+ touchmove（判斷是否是滑動(dòng)事件）+touchend事件封裝組成。
關(guān)于touch和鼠標(biāo)事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下

在手機(jī)上，click的延遲將近400ms。對于用戶而言，是一個(gè)很嚴(yán)重的延遲了！所以在手機(jī)上，并不建議用click。
附上葉小釵大神的原文--手持設(shè)備點(diǎn)擊響應(yīng)速度，鼠標(biāo)事件與touch事件的那些事

這個(gè)應(yīng)該沒什么好解釋的，就是能不發(fā)請求的就不要發(fā)，對于一些小圖標(biāo)（我這做法是把8K以下的圖標(biāo)都轉(zhuǎn)換成base64）之類的，可以將圖片用base64，來減少請求的發(fā)送。尤其是在移動(dòng)端，請求顯得特別珍貴，在網(wǎng)速的不好的情況下，請求就是珍貴中的珍貴。

對于整個(gè)網(wǎng)站來說，圖片是最占流量的資源之一，能不使用就不適用，圖標(biāo)可是使用base64編碼，字體圖標(biāo)代替，SVG等來代替，使用就要選擇最合適的格式，合適的尺寸，然后壓縮--這里推薦騰訊推出的智圖。
PS：過度壓縮圖片大小影響圖片顯示效果，可能會(huì)使得圖片變得模糊，一般來說，品質(zhì)在60左右就差不多了！

首屏加載的快慢，直接影響用戶的體驗(yàn)，建議將非首屏的圖片資源放到用戶需要時(shí)才加載。這樣可以大大優(yōu)化首屏加載，減少首屏加載所需要的時(shí)間！
ps：懶加載要使用js頻繁操作dom，期間會(huì)導(dǎo)致大量重繪渲染，影響性能。

圖片的展示方式有兩種，一種是以圖片標(biāo)簽顯示，一種是以背景圖片顯示！下面寫了這兩者的區(qū)別。
img:html中的標(biāo)簽img是網(wǎng)頁結(jié)構(gòu)的一部分會(huì)在加載結(jié)構(gòu)的過程中和其他標(biāo)簽一起加載。
background：以css背景圖存在的圖片background會(huì)等到結(jié)構(gòu)加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載
也就是說，網(wǎng)頁會(huì)先加載標(biāo)簽img的內(nèi)容，再加載背景圖片background引用的圖片。引入一張圖片，那么在這個(gè)圖片加載完成之前，img后的內(nèi)容不會(huì)顯示。而用background來引入同樣的圖片，網(wǎng)頁結(jié)構(gòu)和內(nèi)容加載完成之后，才開始加載背景圖片，網(wǎng)頁內(nèi)容能正常瀏覽，但是看不到背景圖片。至于這兩種，大家按照習(xí)慣，需求等權(quán)重因素選擇！

在ios上，如果存在局部滾動(dòng)，就要加這個(gè)屬性了！如果不加，滾動(dòng)會(huì)很慢，看起來也會(huì)有一卡一卡的感覺。

-webkit-overflow-scrolling: touch;

但是，加上了這個(gè)，在ios上會(huì)產(chǎn)生bug。

如下布局

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

定位需要，-webkit-overflow-scrolling:touch;也需要，但是這樣設(shè)置，在ios上會(huì)有一個(gè)bug,頁面滾動(dòng)一定的距離后，點(diǎn)擊了顯示彈窗，再關(guān)閉的話，就會(huì)發(fā)現(xiàn)，彈窗的一部分還“留在頁面上”。

解決方案1：
把彈窗的div和.fb-box以兄弟節(jié)點(diǎn)的方式布局，在外層再弄一個(gè)div包住,這個(gè)坑就算爬起來了，效果如下

解決方案2：
.fb-box去掉position:ralative;。讓彈窗的div參考body定位！

ios下fixed元素容易定位出錯(cuò)，軟鍵盤彈出時(shí)，影響fixed元素定位，會(huì)發(fā)生元素錯(cuò)位（滾動(dòng)一下又恢復(fù)），有時(shí)候會(huì)出現(xiàn)閃屏的效果。我也搜過一下這個(gè)問題，發(fā)現(xiàn)別人還遇到了我沒遇到過的問題！真是，哎~。所以在手機(jī)上，不建議用fixed定位，使用absolute代替！如果一定要用，寫好了之后，一定要多測試幾次！

PS：這個(gè)問題，我近段時(shí)間開發(fā)，貌似不加上這個(gè)代碼也沒什么影響，但是以前就是要求加，就加上了，現(xiàn)在沒加上，也沒反饋有什么問題！

.no-flash { 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 

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

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

這個(gè)細(xì)節(jié)是我在基于vue開發(fā)焦點(diǎn)圖的時(shí)候遇到的，后來自己找不到方法，直接在sf上提問了，大家可以去參考下：移動(dòng)端輪播圖，上下滑動(dòng)的時(shí)候不觸發(fā)頁面的滾動(dòng)
ps：滑動(dòng)我沒有使用什么庫，是我根據(jù)touchstart和touchend的移動(dòng)距離來判斷是左右滑動(dòng)或者上下滑動(dòng)！

分享發(fā)送的連接是下面這樣

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

但是分享之后的實(shí)際連接是下面這樣的，別人點(diǎn)擊的分享出去的鏈接，就會(huì)打不開網(wǎng)頁

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.避免使用單文件應(yīng)用

蘋果公司新出的手機(jī)，出了沒多久，段子手就坐不住了，各種調(diào)侃，但是今天我們聊那個(gè)！聊下iphoneX給前端帶來的困擾，也是給ui帶來的困擾吧！下面引入大漠，張鑫旭等人對iphoneX齊劉海的一個(gè)解決方案！避免到時(shí)候跳坑！
iPhone X的缺口和CSS
借助CSS Shapes實(shí)現(xiàn)元素滾動(dòng)自動(dòng)環(huán)繞iPhone X的劉海
剖析 iOS 11 網(wǎng)頁適配問題
手機(jī)管家iPhoneX的適配總結(jié)

上面所說都是遇到的具體問題，至于還有一些比較籠統(tǒng)的細(xì)節(jié)優(yōu)化，或者開發(fā)遇到的問題，比如：壓縮代碼，圖片，合并文件等。大家可以參考下面的資源，這些我不展開說了！

1.web移動(dòng)前端有哪些優(yōu)化方案？
2.web移動(dòng)端頁面性能優(yōu)化方案
3.Web前端優(yōu)化最佳實(shí)踐及工具集錦
4.移動(dòng)前端系列——移動(dòng)頁面性能優(yōu)化
5.Web性能優(yōu)化：圖片優(yōu)化

我在移動(dòng)web(手機(jī)網(wǎng)站)上，遇到的問題，暫時(shí)就是上面這些了！肯定還是會(huì)有很多我沒遇到過的問題，這些以后會(huì)記錄，但是不一定會(huì)以文章方式發(fā)表。如果大家在開發(fā)移動(dòng)網(wǎng)站的時(shí)候，有遇到過什么大大小小的問題，在評(píng)論或者自己以文章方式提醒！方便讓以后的避免踩坑！最后，如果大家有什么補(bǔ)充或者覺得我哪里寫得不好，寫錯(cuò)了！歡迎指點(diǎn)！

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣