移動 Web 開發技巧之（后續）

昨天的《移動 Web 開發技巧》的這篇文章，大家反響不錯，因為這些問題在大家日常寫移動端的頁面時經常遇到的。所以那個文章還是超級實用的，那么我們今天繼續來分享一下移動端的web開發技巧吧，希望對大家有所幫助。

PS：不要讓小伙伴第一次寫移動端像下面這位一臉的蒙逼哈哈… …

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

當網站添加到主屏幕后再點擊進行啟動時，可隱藏地址欄（從瀏覽器跳轉或輸入鏈接進入并沒有此效果）

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

第二、加到主屏后的APP圖標

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

<!– 設計原圖 –>

<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及以下的版本會自動為圖標添加一層高光效果（IOS7開始已使用扁平化的設計風格） * apple-touch-icon-precomposed：使用“設計原圖圖標”

第三、優先使用最新版本 IE 和 Chrome

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

第四、移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

以下支持webkit

• touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指

• touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動

• touchend——當手指離開屏幕時觸發

• touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

以下支持winphone 8

• MSPointerDown——當手指觸碰屏幕時候發生。不管當前有多少只手指

• MSPointerMove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止默認情況的發生：阻止頁面滾動

• MSPointerUp——當手指離開屏幕時觸發

第五、移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。

以下是歷史原因：

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

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

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

那么這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對于web開發者來說 是，頁面js捕獲click事件的回調函數處理，需要300ms后才生效，也就間接導致影響其他業務邏輯的處理。

解決方案：

• fastclick可以解決在手機上點擊事件的300ms延遲

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

觸摸事件的響應順序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應

第六、ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉

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

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

第七、部分android系統中元素被點擊時產生的邊框怎么去掉

android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

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

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

另外，有些機型去除不了，如小米2

對于按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽

第八、手機拍照和上傳圖片

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

• <!– 選擇照片 –>

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

• <!– 選擇視頻 –>

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

使用總結：

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

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

• winphone不支持

• input控件默認外觀丑陋

第九、消除transition閃屏

.css{
    /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
    -webkit-backface-visibility: hidden;
}

開啟硬件加速

• 解決頁面閃白

• 保證動畫流暢

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

設計高性能CSS3動畫的幾個要素

• 盡可能地使用合成屬性transform和opacity來設計CSS3動畫，

• 不使用position的left和top來定位

利用translate3D開啟GPU加速

第十、audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

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

今天我們就分享這十個，大家有需要的自己收藏起來哦！

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

小月博客

http://www.aliyue.net

WEB

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