html5移動端：手機觸控gesturestart（js）
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>-->
</head>
<body>
<div id="a">手機旋轉 jquery
</div>
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
alert(navigator.userAgent.match(/iPhone/i));
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
alert("放大");
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.2, maximum-scale=1.2";
}
}
}
</script>
</body>
</html>
demo2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>gesture</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
<body>
<div id="output"></div>
<script>
var 總結：
js gesture事件在安卓機子上測試沒有反應；只在蘋果正常，汗~~~
Apple在釋出iPhone的同時引入了兩種新的事件概念：touch和gesture。Touch用來儲存有多少手指接觸在螢幕上以及這些觸點的位置、觸點的狀態。Gesture則是用來描述使用者在互動時到底做了哪些更高層次上的行為，比如：pinching，rotating，swiping，double-tapping等等。
Touch事件在眾多平臺上都得到支援(最初在iOS上建立起的touch事件模型已被作為標準寫入W3C Touch Events specification)，而原生的Gesture事件在很多地方都沒有得到支援，在iOS上的Gesture事件也僅限於其平臺支援的少量gesture。
Touches
當你將一個手指放到螢幕上時，將觸發Touch事件的生命週期。每次手指觸控式螢幕幕，一個新的touchstart事件將會產生。每次手指離開，一個touchend事件將會觸發。如果你觸控式螢幕幕並移動手指，那touchmove事件將會觸發。如果有太多手指觸控式螢幕幕或者有另一個行為(比如說手機作業系統的資訊推送) 打斷了touch，一個touchcancel 事件會被觸發。
Touch事件列表:
touchstart: 當手指觸控到螢幕時被觸發
touchend: 當手指離開螢幕時被觸發
touchmove: 當手指在螢幕上移動時被觸發
touchcancel: 當Touch被打斷或是有太多手指觸控式螢幕幕時被觸發。
雖然看起來Touch事件和Mouse事件之間有一一對應的關係，手指移動就如同使用游標一樣，但事實上TouchEvent物件中並不包括那些你可能希望看到的內容。比如，pageX和pageY屬性並沒有被賦值。這是因為在使用滑鼠時，你只有一個互動：游標。但在多點觸控的裝置上，你可以在螢幕的左邊同時按下兩根手指並在螢幕的右邊用另一根手指進行點選，這三個接觸點都會被系統註冊。
為了一次提供所有接觸點的資訊，每一個TouchEvent物件有一個儲存著每個觸點資訊的屬性。同時，它還有另外兩個屬性：其中一個儲存著由當前目標節點觸發的觸點資訊，另一個僅儲存著當前事件相關的觸點資訊。
touches: 包含當前螢幕上每個觸點資訊的列表。
targetTouches: 和touches類似，但只包含在觸發該Touch事件的節點上的觸點資訊。
changedTouches: 包含每個接觸狀態變化的觸點資訊的列表。
為了更好的理解這些列表，讓我們來看一些例子。
當你將手指放到螢幕上，三個列表中的資訊相同。
當你將第二根手指放到螢幕上，touches 將包含兩個觸點的資訊。如果第二根手指放在第一根手指所在的節點上，targetTouches 將同樣包含兩個觸點的資訊，否則它將之包含第二個手指的觸點資訊。 changedTouches 將只包含第二個手指的觸點資訊，因為是由第二個手指的接觸觸發的此次Touch事件。
如果同時用兩根手指接觸螢幕，那changedTouches將包含著兩個手指的觸點資訊。
如果你移動手指，唯一會發生變化的是changedTouches。它將包含所有移動手指的觸點資訊。
當你移開一根手指，它對應的觸點資訊將被從touches和targetTouches中移除，並會被新增到changedTouches列表中。
當你移開最後一根手指，touches和targetTouches列表將被清空，並且changedTouches將只包含最後一根手指的觸點資訊。
使用這些列表，可以比較清楚的瞭解使用者到底在進行那些操作。想象一下做一個JavaScript版的超級瑪麗——你會需要知道玩家在按哪個方向鍵，而在玩家想要發射火球或者跳躍時，你需要監控玩家到底是按在哪個虛擬的按鈕上。
現在我們已經討論了儲存螢幕上手指觸點資訊的幾個列表，但我們還沒有談到這些觸點資訊到底有哪些。這些觸點資訊包含一些和MouseEvent物件中類似的資訊。下面是這些具體資訊內容的列表：
clientX: 觸點相對於viewport的X座標(不包括頁面滾動的偏移量)
clientY: 觸點相對於viewport的Y座標(不包括頁面滾動的偏移量)
screenX: 相對螢幕的X座標
screenY: 相對螢幕的Y座標
pageX: 觸點相對於整個頁面的X座標 (包括頁面滾動的偏移量)
pageY: 觸點相對於整個頁面的Y座標 (包括頁面滾動的偏移量)
identifier: 數字ID編號，用以區別每個觸點。
target: 觸點所在的DOM節點
為智慧手機開發Web應用時很煩人的一點是即使你為你的應用設定好了viewport，在螢幕上移動你的手指可能會移動整個頁面。幸運的是，touchmove事件物件有一個preventDefault方法，可以被用來阻止頁面被移動。