mobile safariのmetaタグのサポートをまとめてみた

ios6にもなったことだし、そろそろ忘れかけてるので備忘録としてまとめてみた。

ホーム画面から開いたときにフルスクリーンで表示するときは

<!-- Available in iOS 2.1 and later -->
<meta name="apple-mobile-web-app-capable" content="yes">

ステータスバーの色をかえるときは

<!-- Available in iOS 2.1 and later -->
<!-- デフォルト -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!--黒 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--黒半透明 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

数字文字列に自動リンクしない

<!-- Available in iOS 1.0 and later -->
<meta name="format-detection" content="telephone=no">

viewportの設定。おなじみの．．．なので詳細説明は割愛

<!-- Available in iOS 1.0 and later -->
<meta name="viewport" content="width=device-width, ..." />

ちなみに、initial-scale=1を指定して横向きにした際に1.5倍に拡大されるバグはiOS6で修正されてます。

アプリのバナー(Smart App Banner)を表示する

<!-- Available in iOS 6.0 and later -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

app-idはURL itunes Link Makerでアプリを検索した際にURL含まれるidに続く９桁の数。
affiliate-dataはiTunes affiliateの設定情報、app-argumentはネイティブアプリに渡すコンテキスト。
たとえばTwitterの場合は、iOS6でTwitterのwebページを開くと

<meta name="apple-itunes-app" content="app-id=333903271, app-argument=twitter://timeline, affiliate-data=partnerId=30&amp;amp;siteID=UkOLawSuc90">

とあって、アプリがインストールされていなければiTunesを開いて、インストールされていればapp-argumenのパラメーターをみて、アプリのタイムラインを表示できます。特に指定してないときはアプリを開くことができます。

ios6 Smart App Bannerサンプル

とりあえず便利ですね。

webページをホームスクリーンに追加するさいのテキストを指定する

<!-- Available in iOS 6.0 and later -->
<meta name="apple-mobile-web-app-title" content="My App Name">

という感じですね。