サイトをWebアプリモード（フルスクリーンモード）で表示する

Apple製のデバイス(iPhone,iPad等)でサイトを開いたときに、通常ではアドレスバーやツールバーが表示されますが、「Webアプリモード（フルスクリーンモード）」を使用することで、メニューバーやツールバーが表示されずに、アプリケーションっぽく表示することができます。

①下記のコードを、<head>内に記述します。

<meta name="apple-mobile-web-app-capable" content="yes">

②「ホーム画面に追加」を行います。

基本的にはこれだけで、ホーム画面に追加されたブックマークアイコンからサイトを立ち上げると、サイトがフルスクリーンで表示されます。

ただし、このままではページ遷移時に、ブラウザがsafariへと飛ばされてしまいます。
つまり、アドレスバーが表示されてしまいます。

折角なので、ページ繊維してもフルスクリーンのま表示させたいところですが、その対応方法が、Kaleidoscope様のBLOGで紹介されていました。

スマホサイト：Webアプリモードで意外と書かれていない落とし穴
http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

これを参考に下記のようなjavascriptを追記することで、safariへとばされることなくフルスクリーンのままページ遷移ができました。

<script>
 $(function(){
 var aTags = $('a'); //ページ内のaタグ群を取得。aTagsに配列として代入。
 aTags.each(function(){ //全てのaタグについて処理
 var url = $(this).attr('href');//aタグのhref属性からリンク先url取得
　　　$(this).removeAttr('href');//念のため、href属性は削除
 $(this).click(function(){//クリックイベントをバインド
 location.href = url;
 });
 });
 });
</script>

このスクリプトを、is_mobile関数等で、モバイルデバイス時だけ有効にする等の処理をすればいいでしょう。