iPhoneのSafariでcanvasタグに描画するサンプルを作ってみました。
iPhoneでcanvasに描画
http://tsuyobi.heteml.jp/html/iphone/canvas/
ざっくりと重要な処理の部分のみ解説。
メタタグで画面の拡大縮小のリミットを1.0倍に設定→ピンチによる拡大、縮小の抑止
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
body部分でのtouchstartの動作を抑止→canvas以外の部分をスクロールして、離したときにウィンドウがバウンドする動作を抑止
document.body.ontouchstart = function(e) { e.preventDefault(); };bodyタグでstyleに -webkit-user-select: none; を設定→canvasを長押ししたときに選択状態になり、「コピー」などのメニューが表示されるのを抑止
<body style="-webkit-user-select: none; background: gray">
iPhone固有のタッチイベントで描画処理を行う。
canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);(2010/12/15 追記)
必要に応じて、 -webkit-touch-callout: none; も指定しておいた方が良いかもしれません。
iPhoneアプリ開発ブログ in 大阪 | モバイルSafariでの “Action” ポップアップを抑制する
http://devlog.feedtailor.jp/items/detail/3/iPhone
-webkit-tap-highlight-color のこの指定もしていた方が良いかも？
AndroidのWebViewでフォーカスされたときのハイライト（枠、網掛け）を消すCSS記述 - にたまごほうれん草
http://d.hatena.ne.jp/emergent/20100616/1276701579
