移動 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有個副作用，就是IME不再能夠輸入多個字元

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

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

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

• <input type=”file”>的accept 屬性
• <!– 選擇照片 –>
• <input type=file accept=”image/*”>
• <!– 選擇視頻 –>
• <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

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

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