移動(dòng) Web 開(kāi)發(fā)技巧之（后續(xù)）

昨天的《移動(dòng) Web 開(kāi)發(fā)技巧》的這篇文章，大家反響不錯(cuò)，因?yàn)檫@些問(wèn)題在大家日常寫(xiě)移動(dòng)端的頁(yè)面時(shí)經(jīng)常遇到的。所以那個(gè)文章還是超級(jí)實(shí)用的，那么我們今天繼續(xù)來(lái)分享一下移動(dòng)端的web開(kāi)發(fā)技巧吧，希望對(duì)大家有所幫助。

PS：不要讓小伙伴第一次寫(xiě)移動(dòng)端像下面這位一臉的蒙逼哈哈… …

第一、啟用 WebApp 全屏模式（IOS）

當(dāng)網(wǎng)站添加到主屏幕后再點(diǎn)擊進(jìn)行啟動(dòng)時(shí)，可隱藏地址欄（從瀏覽器跳轉(zhuǎn)或輸入鏈接進(jìn)入并沒(méi)有此效果）

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!--more-->

第二、加到主屏后的APP圖標(biāo)

指定web app添加到主屏后的圖標(biāo)路徑，有兩種略微不同的方式：

<!– 設(shè)計(jì)原圖 –>

<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">

<!– 添加高光效果 –>

<link href="short_cut_114x114.png" rel="apple-touch-icon">

* apple-touch-icon：在IOS6及以下的版本會(huì)自動(dòng)為圖標(biāo)添加一層高光效果（IOS7開(kāi)始已使用扁平化的設(shè)計(jì)風(fēng)格） * apple-touch-icon-precomposed：使用“設(shè)計(jì)原圖圖標(biāo)”

第三、優(yōu)先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

第四、移動(dòng)端touch事件(區(qū)分webkit 和 winphone)

當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件

以下支持webkit

• touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指

• touchmove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另?yè)面，會(huì)調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁(yè)面滾動(dòng)

• touchend——當(dāng)手指離開(kāi)屏幕時(shí)觸發(fā)

• touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過(guò)程中突然頁(yè)面alert()一個(gè)提示框，此時(shí)會(huì)觸發(fā)該事件，這個(gè)事件比較少用

以下支持winphone 8

• MSPointerDown——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指

• MSPointerMove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另?yè)面，會(huì)調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁(yè)面滾動(dòng)

• MSPointerUp——當(dāng)手指離開(kāi)屏幕時(shí)觸發(fā)

第五、移動(dòng)端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)

移動(dòng)設(shè)備上的web網(wǎng)頁(yè)是有300ms延遲的，玩玩會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。

以下是歷史原因：

2007年蘋(píng)果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁(yè)能比較好的展示在手機(jī)端上，使用了雙擊縮放 (double tap to zoom)的方案，比如你在手機(jī)上用瀏覽器打開(kāi)一個(gè)PC上的網(wǎng)頁(yè)，你可能在看到頁(yè)面內(nèi)容雖然可以撐滿整個(gè)屏幕，但是字體、圖片都很小看不清，此時(shí)可以快速 雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。

雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁(yè)縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候，例如跳轉(zhuǎn)鏈接<a href=”#”></a>， 此處瀏覽器會(huì)先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會(huì)先Hold一段 時(shí)間t，如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會(huì)做單擊跳轉(zhuǎn)鏈接的處理，如果t時(shí)間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會(huì)禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn) 行對(duì)該部分區(qū)域頁(yè)面的縮放操作。

那么這個(gè)時(shí)間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來(lái)。造成的后果用戶純粹單擊頁(yè)面，頁(yè)面需要過(guò)一段時(shí)間才響應(yīng)，給用戶慢體驗(yàn)感覺(jué)，對(duì)于web開(kāi)發(fā)者來(lái)說(shuō) 是，頁(yè)面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。

解決方案：

• fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲

• zepto的touch模塊，tap事件也是為了解決在click的延遲問(wèn)題

觸摸事件的響應(yīng)順序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解決300ms延遲的問(wèn)題，也可以通過(guò)綁定ontouchstart事件，加快對(duì)事件的響應(yīng)

第六、ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉

ios用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩

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

第七、部分android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框怎么去掉

android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
}

-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符

另外，有些機(jī)型去除不了，如小米2

對(duì)于按鈕類還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽

第八、手機(jī)拍照和上傳圖片

• <input type=”file”>的accept 屬性

• <!– 選擇照片 –>

• <input type=file accept=”p_w_picpath/*”>

• <!– 選擇視頻 –>

• <input type=file accept=”video/*”>

使用總結(jié)：

• ios 有拍照、錄像、選取本地圖片功能

• 部分android只有選取本地圖片功能

• winphone不支持

• input控件默認(rèn)外觀丑陋

第九、消除transition閃屏

.css{
    /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見(jiàn)：隱藏）*/
    -webkit-backface-visibility: hidden;
}

開(kāi)啟硬件加速

• 解決頁(yè)面閃白

• 保證動(dòng)畫(huà)流暢

.css {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

設(shè)計(jì)高性能CSS3動(dòng)畫(huà)的幾個(gè)要素

• 盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫(huà)，

• 不使用position的left和top來(lái)定位

利用translate3D開(kāi)啟GPU加速

第十、audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放

應(yīng)對(duì)方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

今天我們就分享這十個(gè)，大家有需要的自己收藏起來(lái)哦！

========================================================

小月博客

http://www.aliyue.net

WEB

========================================================