ios webページをホームアイコンに登録後、フルスクリーンで起動後safariに遷移させる方法

i-phoneでwebページをホームアイコンに登録して、
そこから起動するとアプリ的なフルスクリーンで表示されますよね。

でも戻るボタンが使えなくなったり、
リンク踏むとsafariに行ったりして逆に不便ですよね。

業務でタイトルの通り、
webページをホームアイコンに登録後、フルスクリーンで起動後safariに遷移させる
ってのをやった時のメモよね。

概要的には下記よね。

1. ホームアイコンから起動する時、フルスクリーンになるように指定
2. 起動時のページでフルスクリーンか判定し、safariに飛ばす

なだけなんですが、、、そこそこ躓きました。。。

まずは結果から。

• ホームアイコンから起動する時、フルスクリーンになるように指定

対象のページのヘッダーに下記を追加
公式ドキュメントはこちら
Safari Web Content Guide: Configuring Web Applications

//フルスクリーンで起動
<meta name="apple-mobile-web-app-capable" content="yes" /> 

//ステータスバーはお好みで
//デフォルト
<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">

• 起動時のページでフルスクリーンか判定し、safariに飛ばす

フルスクリーンかの判定は下記でできる模様
window.navigator.standalone

<a href="hoge" id="jump_link"></a>

//フルスクリーンか判定して、強制的に遷移
<script type="text/javascript">
<!--
	$(function(){
		if(window.navigator.standalone){
			document.getElementById("jump_link").click();
		}
	});
-->
</script>

結果かなり強引・・・！
これがjsの世界観。

location.hrefなどだと遷移はするのですが、フルスクリーンのままでした。
サーバー側でリダイレクトなどしてもフルスクリーンのままだったので上記のように対応。

あとなくてもいいのですが、下記のようにサイズごとスプラッシュ画像が必要ですん。

<!-- iPhone 3 and 4 Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
  
<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-1024x748.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-2048x1496.png">

逆にフルスクリーンのままにするには、jsでページのaタグをon_clickで処理する模様。

感謝致します。