HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
設定できる値は以下のとおり
apple-mobile-web-app-capable : フルスクリーンにするかどうか?
【yes】フルスクリーンにする
【no】フルスクリーンにしない
apple-mobile-web-app-status-bar-style : (画面一番上のステータスバーの表示方法)
【default】標準
【black】反転(黒バック)
【black-translucent】(透明)
ただしページ内リンク以外のリンクがあるとSafariが別で立ち上がるので、jQuery-uiなどを使ってリンクを組み立てるか 次の「jquery_mobile_js_link.js」を使ってリンクを押すとjavascriptで画面遷移するように変更する必要があります。
<script src="jquery_mobile_js_link.js"></script>
jquery_mobile_js_link.js
// Initialization
jQuery.mobile_js_link = {
init: function() {
for (module in jQuery.mobile_js_link) {
if (jQuery.mobile_js_link[module].init)
jQuery.mobile_js_link[module].init();
}
}
};
jQuery(document).ready(jQuery.mobile_js_link.init);
jQuery.mobile_js_link.rewrite = {
init: function() {
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){}
else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){}
else{
return;
}
var all_tags = $('a');
all_tags.each(function(){
var url = $(this).attr('href');
$(this).attr('href','#');
$(this).click(function(){
location.href = url;
});
});
}
};