iPhone Safariの固有仕様を調べてみる

******************************************************************************
* iPhone Safari 固有仕様                                                             *
******************************************************************************

■UserAgentの見方
---
　UserAgent
　　Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20

　(1) iPhone
　　"iPhone;" が含まれる

　(2) iPod touch
　　"iPod;" が含まれる

　(3) OSバージョン
　　"iPhone OS X_Y"
　　※X: メジャーバージョン、Y: マイナーバージョン

　(4) Safariバージョン
　　"Version/X.Y.Z"
　　※X: メジャーバージョン、Y: マイナーバージョン１、Z: マイナーバージョン２

■リンク
---
　・メールアドレス
　　<a href="mailto:foo@example.com?cc=bar@example.com&subject=題名&body=本文">リンク文字列</a>

　・電話番号
　　<a href="tel:XXX-XXX-XXXX">リンク文字列</a>
　　　or
　　電話番号らしき文字列（数字＋区切り記号）を自動でリンク
　　※無効にするには以下のタグを追加
　　　<meta name="format-detection" content="telephone=no"/>

　・マップ
　　<a href="maps:q=<緯度>,<経度>+(コメント)">リンク文字列</a>
　　※コメント付きのピン

 ・動画
　　<a href="<動画ファイル>">リンク</a>
　　※自動でiPodアプリケーションが起動
　　※サムネイル表示する場合は、以下のようにすれば良い
　　　<embed src="<サムネイルファイル>" href="<動画ファイル>" type="video/x-m4v" target="myself" scale="1" ...>

　・YouTube
　　<a href="youtube:<動画ID>">リンク文字列</a>
　　　or
　　<a href="http://www.youtube.com/v/<動画ID>">リンク文字列</a>

■回転イベント
---
　・window.onorientationchange
　　端末の向きが変わったときに発生するイベント
　　※window.orientationに角度情報を持つ（0:普通 or 90:左回転 or -90:右回転）

■タッチイベント
---
　・touchstart
　　指を新しくスクリーンに触れた場合に生成されるイベント
　・touchend
　　スクリーンから指を離した場合に生成されるイベント
　・touchmove
　　指をスクリーンに触れている間にスライドさせた場合に生成されるイベント
　・touchcancle
　　イベントがシステムによってキャンセルされた場合に生成されるイベント (システムによる介入時に使われるとみられる)

　　※イベントプロパティ（それぞれclientX、clientY、screenX、screenY、pageX、pageY、target、identifierなどの属性を持つ）
　　　・touches
　　　　スクリーンに触れている指ごとの情報
　　　・targetTouches
　　　　touchesと似た情報を保持しているものの同じノード内で開始されたタッチ情報に限定
　　　・changedTouches
　　　　そのときイベントが発生した指のタッチ情報
　　※必要に応じてevent.preventDefault()でデフォルト動作の抑制をすること
　　　抑制しないと、クリックやフリック操作と動作が衝突する可能性がある

■ジェスチャーイベント
---
　・gesturestart
　　２本の指を新しくスクリーンに触れた場合に生成されるイベント
　・gestureend
　　スクリーンに触れている指が１本以下になった場合に生成されるイベント
　・gesturechange
　　２本の指がスクリーンに触れている状態でスライドさせた場合に生成されるイベント

　　※イベントプロパティについてタッチイベントと同様
　　※必要に応じてevent.preventDefault()でデフォルト動作の抑制をすること
　　　抑制しないと、クリックやフリック操作と動作が衝突する可能性がある

■イベント補足（前回からの引用）
---
　(1) タップ（シングルクリック）
　　　・クリック不可な要素をタップした場合、イベントは発生しない
　　　・クリック可能な要素をタップすると「mousemove」イベントが発生する
　　　・それによってコンテンツが変化しなかった場合は、「mousedown」「mouseup」「click」
　　　　イベントが発生する
　　　・「mousemove」イベントは、「mouseover」および「mouseout」イベントも発生させる

　(2) ダブルタップ（ダブルクリック）
　　　ダブルタップは表示をズームするためのジェスチャですが、マウスイベントは何も発生しません。

　(3) ドラッグ（ゆっくりスクロール）
　　　ドラッグ中には「onscroll」イベントは発生しません。指を止めてドラッグを
　　　終了した時点で「onscroll」イベントが発生します。

　(4) タッチ＆ホールド（インフォメーションバブルの表示および指下の内容の拡大表示）
　　　指でスクリーンをタッチしたままホールドすることでインフォメーションバブルが表示
　　　される場合がありますが、そのとき、マウスイベントは何も発生しません。

　(5) 2本指ドラッグ（テキストエリアやインラインフレーム内容のスクロール）
　　・スクロール可能な要素（テキストエリアやインラインフレームなど）の上で2本指
　　　ドラッグを行った場合は、「mousewheel」イベントが発生する
　　・それ以外の場所で2本指ドラッグを行った場合は、1本指ドラッグと同じ

■表示補足（前回からの引用）
---
　(1) 文字のサイズ
　　・自動アジャストを無効にする
　　　html {-webkit-text-size-adjust:none}

　　・200%に拡大
　　　html {-webkit-text-size-adjust:200%}

　(2) ビューポート
　　・ポートレート表示（縦）
　　　　320x356
　　　※デフォルトでは縮小表示で、横幅980
　　　※スクリーン解像度（縦）320x480
　　　　スクリーン解像度（横）480x320

　　・ビューポート横幅を指定する
　　　<meta name = "viewport" content = "width = 700">

　　・デバイスの横幅に合わせる
　　　<meta name = "viewport" content = "width = device-width">

　　※ビューポートメタタグでは、横幅（width）以外の値も設定できます。
　　　height（高さ）や initial-scale（初期表示時の拡大率）などです。
　　　これらの内1つでも設定すれば、それに応じてWebブラウザが自動的にほかの値を計算してコンテンツを表示します。

■参考
---
　http://wiki.sohaya.com/index.php/Web%E9%96%8B%E7%99%BA%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88#r87531ee
　http://www.thinkit.co.jp/article/146/5/
　http://iphone.goodegg.jp/archives/4717
　http://www.atmarkit.co.jp/fwcr/special/iphone/01.html
　http://blog.makotokw.com/2008/07/01/windowscygwiniphoneipod_touch
　http://blog.makotokw.com/2009/03/19/windowscygwiniphoneipod_touch_1/
　http://www.ibm.com/developerworks/jp/opensource/library/os-eclipse-iphone/
　http://wiki.sohaya.com/index.php/%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF#w8f2c359
　http://zapanet.info/blog/item/1165