彙總30條移動Web開發技巧

1. 添加到主屏後的標題（IOS）
2. 啓用 WebApp 全屏模式（IOS）
3. 百度禁止轉碼
4. 設置狀態欄的背景顏色（IOS）
5. 移動端手機號碼識別（IOS）
6. 移動端郵箱識別（Android）
7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）
8. IOS Web app啓動動畫
9. 添加到主屏後的APP圖標
10. 優先使用最新版本 IE 和 Chrome
11.viewport模板
1、移動端如何定義字體font-family
2、移動端字體單位font-size選擇px還是rem
3、移動端touch事件(區分webkit 和 winphone)
4、移動端click屏幕產生200-300 ms的延遲響應
5、什麼是Retina 顯示屏，帶來了什麼問題
6、ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
7、部分android系統中元素被點擊時產生的邊框怎麼去掉
8、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉
9、webkit表單元素的默認外觀怎麼重置
10、webkit表單輸入框placeholder的顏色值能改變麼
11、webkit表單輸入框placeholder的文字能換行麼
12. 關閉iOS鍵盤首字母自動大寫
13. 關閉iOS輸入自動修正
14. 禁止文本縮放
15. 移動端如何清除輸入框內陰影
16. 快速回彈滾動
17. 移動端禁止選中內容
18. 移動端取消touch高亮效果
19. 如何禁止保存或拷貝圖像（IOS）
20.模擬按鈕hover效果
21.屏幕旋轉的事件和樣式
22.audio元素和video元素在ios和andriod中無法自動播放
23.搖一搖功能
24.手機拍照和上傳圖片
25. 消除transition閃屏
26. android 上去掉語音輸入按鈕
1. 移動端基礎框架
2. 滑屏框架
3.瀑布流框架

META相關

1. 添加到主屏後的標題（IOS）

1	<meta name="apple-mobile-web-app-title" content="標題">

2. 啓用 WebApp 全屏模式（IOS）

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

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

2	<meta name="apple-touch-fullscreen" content="yes" />

<!--more-->

3. 百度禁止轉碼

通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之噁心。不過我們可以通過這個meta標籤來禁止它：

1	<meta http-equiv="Cache-Control" content="no-siteapp" />

百度SiteApp轉碼聲明

4. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

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

content 參數：

• default ：狀態欄背景是白色。
• black ：狀態欄背景是黑色。
• black-translucent ：狀態欄背景是半透明。 如果設置爲 default 或 black ,網頁內容從狀態欄底部開始。 如果設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5. 移動端手機號碼識別（IOS）

在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話鏈接，比如：

• 7位數字，形如：1234567
• 帶括號及加號的數字，形如：([phone]
• 雙連接線的數字，形如：00-00-00111
• 11位數字，形如：13800138000

可能還有其他類型的數字也會被識別。我們可以通過如下的meta來關閉電話號碼的自動識別：

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

開啓電話功能

1	<a href="tel:123456"><span class="token number">123456</a></span>

開啓短信功能：

1	<a href="sms:123456"><span class="token number">123456</a> </span>

6. 移動端郵箱識別（Android）

與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：

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

同樣地，我們也可以通過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

1	<a mailto:[email protected]">[email protected]</a>

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

1	<meta name="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app啓動動畫

由於iPad 的啓動畫面是不包括狀態欄區域的。所以啓動圖片需要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小

01	<!-- iPhone -->

02	<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)"rel="apple-touch-startup-image">

03	<!-- iPhone (Retina) -->

04	<link href="apple-touch-startup-image-640x960.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image">

05	<!-- iPad (portrait) -->

06	<link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)"rel="apple-touch-startup-image">

07	<!-- iPad (landscape) -->

08	<link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)"rel="apple-touch-startup-image">

09	<!-- iPad (Retina, portrait) -->

10	<link href="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image">

11	<!-- iPad (Retina, landscape) -->

12	<link href="apple-touch-startup-image-2048x1496.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image">

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏後的APP圖標

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

1	<!-- 設計原圖 -->

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

3	<!-- 添加高光效果 -->

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

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

效果：

圖標尺寸：

可通過指定size屬性來爲不同的設備提供不同的圖標（但通常來說，我們只需提供一個114 x 114 pixels大小的圖標即可 ）

官方說明如下

1

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons inall four sizes.For iPhone and iPod touch both of these sizes are required:<span class="token number">57 x <span class="token number">57 pixels<span class="token number">114 x <span class="token number">114 pixels (high resolution)For iPad, both of these sizes are required:<span class="token number">72 x <span class="token number">72 pixels<span class="token number">144 x <span class="token number">144 (high resolution)</span></span></span></span></span></span></span></span>

10. 優先使用最新版本 IE 和 Chrome

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

11.viewport模板

01	<!DOCTYPE html>

02

<html>

03

<head>

04	<meta charset="utf-8">

05	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport">

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

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

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

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

10	<title>標題</title>

11	<link rel="stylesheet" href="index.css">

12

</head>

13	<body>這裏開始內容</body>

14

</html>

常見問題

1、移動端如何定義字體font-family

三大手機系統的字體：

ios 系統

• 默認中文字體是Heiti SC
• 默認英文字體是Helvetica
• 默認數字字體是HelveticaNeue
• 無微軟雅黑字體

android 系統

• 默認中文字體是Droidsansfallback
• 默認英文和數字字體是Droid Sans
• 無微軟雅黑字體

winphone 系統

• 默認中文字體是Dengxian(方正等線體)
• 默認英文和數字字體是Segoe
• 無微軟雅黑字體

各個手機系統有自己的默認字體，且都不支持微軟雅黑 如無特殊需求，手機端無需定義中文字體，使用系統默認 英文字體和數字字體可使用 Helvetica ，三種系統都支持

1	/* 移動端定義字體的代碼 */

2	body{font-family:Helvetica;}

2、移動端字體單位font-size選擇px還是rem

對於只需要適配手機設備，使用px即可

對於需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備

rem配置參考：

01	html {font-size:10px}

02	@media screen and (min-width:480px) and (max-width:639px) {

03

html {

04	font-size: 15px

05

}

06

}

07	@media screen and (min-width:640px) and (max-width:719px) {

08

html {

09	font-size: 20px

10

}

11

}

12	@media screen and (min-width:720px) and (max-width:749px) {

13

html {

14	font-size: <span class="token number">22.5px

15

}

16

}

17	@media screen and (min-width:750px) and (max-width:799px) {

18

html {

19	font-size: <span class="token number">23.5px

20

}

21

}

22	@media screen and (min-width:800px) and (max-width:959px) {

23

html {

24	font-size: 25px

25

}

26

}

27	@media screen and (min-width:960px) and (max-width:1079px) {

28

html {

29	font-size: 30px

30

}

31

}

32	@media screen and (min-width:1080px) {

33

html {

34	font-size: 32px

35

}

36	}</span></span>

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

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

以下支持webkit

• touchstart——當手指觸碰屏幕時候發生。不管當前有多少隻手指
• touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動
• touchend——當手指離開屏幕時觸發
• touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

以下支持winphone 8

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

4、移動端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	<span class="token number">1、ontouchstart

2	<span class="token number">2、ontouchmove

3	<span class="token number">3、ontouchend

4	<span class="token number">4、onclick</span></span></span></span>

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

5、什麼是Retina 顯示屏，帶來了什麼問題

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變爲多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個

在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計爲傳統PC的2倍

那麼，前端的應對方案是：

設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2

1	//例如圖片寬高爲：200px*200px，那麼寫法如下

2	.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px

1	.css{font-size:20px}

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

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

1	a,button,input,textarea{-webkit-tap-highlight-color: <span class="token function">rgba(<span class="token number">0,<span class="token number">0,<span class="token number">0,<span class="token number">0;)}</span></span></span></span></span>

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

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

1	a,button,input,textarea{

2	-webkit-tap-highlight-color: <span class="token function">rgba(<span class="token number">0,<span class="token number">0,<span class="token number">0,<span class="token number">0;)

3	-webkit-user-modify:read-write-plaintext-only;

4	}</span></span></span></span></span>

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

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

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

8、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉

1	<meta name="msapplication-tap-highlight" content="no">

9、webkit表單元素的默認外觀怎麼重置

1	.css{-webkit-appearance:none;}

10、webkit表單輸入框placeholder的顏色值能改變麼

1	input::-webkit-input-placeholder{color:#AAAAAA;}

2	input:focus::-webkit-input-placeholder{color:#EEEEEE;}

11、webkit表單輸入框placeholder的文字能換行麼

ios可以，android不行~

12. 關閉iOS鍵盤首字母自動大寫

在iOS中，默認情況下鍵盤是開啓首字母大寫的功能的，如果啓用這個功能，可以這樣：

1	<input type="text" autocapitalize="off" />

13. 關閉iOS輸入自動修正

和英文輸入默認自動首字母大寫那樣，IOS還做了一個功能，默認輸入法會開啓自動修正輸入內容，這樣的話，用戶經常要操作兩次。如果不希望開啓此功能，我們可以通過input標籤屬性來關閉掉：

1	<input type="text" autocorrect="off" />

14. 禁止文本縮放

當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

1

html {

2	-webkit-text-size-adjust: <span class="token number">100%;

3

}</span>

需要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 ‘meta viewport’。

15. 移動端如何清除輸入框內陰影

在iOS上，輸入框默認有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

1	input,textarea {

2	border: <span class="token number">0; /* 方法1 */

3	-webkit-appearance: none; /* 方法2 */

4

}</span>

16. 快速回彈滾動

我們先來看看回彈滾動在手機瀏覽器發展的歷史：

• 早期的時候，移動端的瀏覽器都不支持非body元素的滾動條，所以一般都藉助 iScroll;
• Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能通過2個手指進行滾動；
• Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果，不過隨後這個特性又被移除；
• iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果

在iOS上如果你想讓一個元素擁有像 Native 的滾動效果，你可以這樣做：

1

.xxx {

2	overflow: auto; /* auto | scroll */

3	-webkit-overflow-scrolling: touch;

4

}

PS：iScroll用過之後感覺不是很好，有一些詭異的bug，這裏推薦另外一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），而且還有回彈滾動的內置滾動條，官方地址：

iDangero

17. 移動端禁止選中內容

如果你不想用戶可以選中頁面中的內容，那麼你可以在css中禁掉：

1	.user-select-none {

2	-webkit-user-select: none;  /* Chrome all / Safari all */

3	-moz-user-select: none;     /* Firefox all （移動端不需要） */

4	-ms-user-select: none;      /* IE 10+ */      }

18. 移動端取消touch高亮效果

在做移動端頁面時，會發現所有a標籤在觸發點擊時或者所有設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來進行全局的禁止：

1

html {

2	-webkit-tap-highlight-color: <span class="token function">rgba(<span class="token number">0, <span class="token number">0, <span class="token number">0, <span class="token number">0);

3	}</span></span></span></span></span>

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉鏈接的a標籤換成其它標籤，可以解決這個問題。

19. 如何禁止保存或拷貝圖像（IOS）

通常當你在手機或者pad上長按圖像 img ，會彈出選項 存儲圖像 或者 拷貝圖像，如果你不想讓用戶這麼操作，那麼你可以通過以下方法來禁止：

1

img {

2	-webkit-touch-callout: none;

3

}

20.模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中並沒有鼠標指針，使用css的hover並不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下，

01	<!DOCTYPE html>

02

<html>

03

<head>

04	<meta charset="utf-8">

05	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport">

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

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

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

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

10	<style type="text/css">

11	a{-webkit-tap-highlight-color: <span class="token function">rgba(<span class="token number">0,<span class="token number">0,<span class="token number">0,<span class="token number">0);}

12	.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}

13	.btn-blue:active{background-color: #357AE8;}</style>

14

</head>

15

<body>

16	<div class="btn-blue">按鈕</div>

17	<script type="text/javascript">document.<span class="token function">addEventListener("touchstart", function(){}, <span class="token boolean">true)</script>

18

</body>

19	</html></span></span></span></span></span></span></span>

兼容性ios5+、部分android 4+、winphone 8

要做到全兼容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名

01	<!DOCTYPE html>

02

<html>

03

<head>

04	<meta charset="utf-8">

05	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport">

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

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

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

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

10	<style type="text/css">

11	a{-webkit-tap-highlight-color: <span class="token function">rgba(<span class="token number">0,<span class="token number">0,<span class="token number">0,<span class="token number">0);}

12	.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}

13	.btn-blue-on{background-color: #357AE8;}

14

</style>

15

</head>

16

<body>

17	<div class="btn-blue">按鈕</div>

18	<script type="text/javascript">

19	var btnBlue = document.<span class="token function">querySelector(".btn-blue");

20	btnBlue.ontouchstart = function(){

21	this.className = "btn-blue btn-blue-on"

22

}

23	btnBlue.ontouchend = function(){

24	this.className = "btn-blue"

25

}

26

</script>

27

</body>

28	</html></span></span></span></span></span></span>

21.屏幕旋轉的事件和樣式

事件

window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；

01	window.onorientationchange = function(){

02	<span class="token function">switch(window.orientation){

03	case -<span class="token number">90:

04	case <span class="token number">90:

05	<span class="token function">alert("橫屏:" + window.orientation);

06	case <span class="token number">0:

07	case <span class="token number">180:

08	<span class="token function">alert("豎屏:" + window.orientation);

09

break;

10

}

11	} </span></span></span></span></span></span></span>

樣式

1	//豎屏時使用的樣式

2	@media all and (orientation:portrait) {

3

.css{}

4

}

5	//橫屏時使用的樣式

6	@media all and (orientation:landscape) {

7

.css{}

8

}

22.audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

1	$('html').<span class="token function">one('touchstart',function(){

2	audio.<span class="token function">play()

3	})</span></span>

23.搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

24.手機拍照和上傳圖片

<input type="file">的accept 屬性

1	<!-- 選擇照片 -->

2	<input type=file accept="image/*">

3	<!-- 選擇視頻 -->

4	<input type=file accept="video/*">

使用總結：

• ios 有拍照、錄像、選取本地圖片功能
• 部分android只有選取本地圖片功能
• winphone不支持
• input控件默認外觀醜陋

25. 消除transition閃屏

1

.css{

2	/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/

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

4	/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/

5	-webkit-backface-visibility: hidden;

6

}

開啓硬件加速

• 解決頁面閃白

• 保證動畫流暢

1

.css {

2	-webkit-transform: <span class="token function">translate3d(<span class="token number">0, <span class="token number">0, <span class="token number">0);

3	-moz-transform: <span class="token function">translate3d(<span class="token number">0, <span class="token number">0, <span class="token number">0);

4	-ms-transform: <span class="token function">translate3d(<span class="token number">0, <span class="token number">0, <span class="token number">0);

5	transform: <span class="token function">translate3d(<span class="token number">0, <span class="token number">0, <span class="token number">0);

6	}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

• 儘可能地使用合成屬性transform和opacity來設計CSS3動畫，
• 不使用position的left和top來定位
• 利用translate3D開啓GPU加速

26. android 上去掉語音輸入按鈕

1	input::-webkit-input-speech-button {display: none}

框架

1. 移動端基礎框架

• zepto.js 語法與jquery幾乎一樣，會jquery基本會zepto~

• iscroll.js 解決頁面不支持彈性滾動，不支持fixed引起的問題~ 實現下拉刷新，滑屏，縮放等功能~

• underscore.js 該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

• fastclick 加快移動端點擊響應時間
• animate.css CSS3動畫效果庫

2. 滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

• slip.js
• iSlider.js
• fullpage.js

3.瀑布流框架

• masonry

工具推薦

• caniuse 各瀏覽器支持html5屬性查詢
• paletton 調色搭配

查看鏈接

阻止縮放

缺省的多點觸摸設置不是特別的好用，因爲你的滑動和手勢往往與瀏覽器的行爲有關聯，比如說滾動和縮放。

要禁用縮放功能的話，使用下面的元標記設置你的視圖區（viewport），這樣其對於用戶來說就是不可伸縮的了：

1	content="width=device-width, initial-scale=1.0, user-scalable=no"> <p> </p>

看看這篇關於移動HTML 5 的文章，瞭解更多關於視圖區設置的信息。

阻止滾動

一些移動設備有缺省的touchmove行爲，比如說經典的iOS overscroll效果，當滾動超出了內容的界限時就引發視圖反彈。這種做法在許多多點觸控應用中會帶來混亂，但要禁用它很容易。

1	document.body.addEventListener('touchmove', function(event) {

2	event.preventDefault();

3	}, false);

細心渲染 

如果你正在編寫的多點觸控應用涉及了複雜的多指手勢的話，要小心地考慮如何響應觸摸事件，因爲一次要處理這麼多的事情。考慮一下前面一節中的在屏幕上畫出所有觸點的例子，你可以在有觸摸輸入的時候就立刻進行繪製：

1	canvas.addEventListener('touchmove', function(event) {

2	renderTouches(event.touches);

3

},

不過這一技術並不是要隨着屏幕上的手指個數的增多而擴充，替代做法是，可以跟蹤所有的手指，然後在一個循環中做渲染，這樣可獲得更好的性能：

1	var touches = []

2	canvas.addEventListener('touchmove', function(event) {

3	touches = event.touches;

4	}, false);

5

6	// 設置一個每秒60幀的定時器

7	timer = setInterval(function() {

8	renderTouches(touches);

9

}, 15);

提示 ：setInterval不太適合於動畫，因爲它沒有考慮 到瀏覽器自己的渲染循環。現代的桌面瀏覽器提供了requestAnimationFrame這一函數，基於性能和電池工作時間原因，這是一個更好的選 擇。一但瀏覽器提供了對該函數的支持，那將是首選的處理事情的方式。

使用targetTouches和changedTouches

要記住的一點是，event.touches是與屏幕接觸的所有手指的一個數組，而不僅是位於目標DOM元素上的那些。你可能會發現使用 event.targetTouches和event.changedTouches來代替event.touches更有用一些。

最後一點，因爲你是在爲移動設備做開發，因此你應該要留心移動的最佳做法，這些在Eric Bidelman的文章 中有論及，以及要了解這一W3C文檔 。