Webアプリをネイティブアプリみたいに見せるには

Webアプリをネイティブアプリみたいにみせる

Webアプリをネイティブアプリみたいに見せるには
アプリアイコンの登録と
ブラウザバーやメニューを非表示にする

まずは、アプリアイコンの登録

これは、HTMLファイルのheadへ
アプリアイコンへの設定をすることでできる

<link rel="apple-touch-icon-precomposed" href="../images/icon_file.png"/>

というように、
href=””には、アイコンファイルへのパスを記述する

アイコンのサイズは
144×144がオススメ

これは、アイコンのサイズが小さいと、
解像度の高い端末だとボケて表示されてしまうから

次に、アドレスバーの削除

Androidでは、

<meta name="apple-mobileweb-app-capable"

が使えないため、Javascriptで制御する

Androidでは、画面が1pxでも下へ移動するとURLバーが隠れるため
この特性を使う

$(document).on("mobileinit",function(){
if(navigator.userAgent.match(/Android|iPhone/i)){
$(document).on("pagechange",function()e,data){
//1pxずらしてアドレスバーを隠す
var hide_addressbar = function(){
if(document.body.scrollTop==0){
window.scrollTo(0,1);
}
}

/*ページ縦幅がスクリーンの縦幅より狭い場合
ページ縦幅をスクリーン+1して
スクロールできるようにする*/
if(navigator.userAgent.match(/Android/i)){
var pageHeight = $(document).height();
var windowHeight = window.outerHeight / window.devicePixelRatio;

if(windowHeight => pageHeight){
pageHeight = windowHeight+1;
$('BODY').css('height',(pageHeight)+'px');
}
}
hide_addressbar();

//スクロール時に強制的に 1pxずらす
$(window).on('scrollStop',function(){
hide_addressbar();
});
});
}

});

これは、Androidは、ページがスクリーンより短いと
縦にスクロールできないため
ページの縦幅を
スクリーンの縦幅+1px広げることで
スクリーン可能にしている

それが

if(navigator.userAgent.match(/Android/i)){
var pageHeight = $(document).height();
var windowHeight = window.outerHeight / window.devicePixelRatio;

if(windowHeight => pageHeight){
pageHeight = windowHeight+1;
$('BODY').css('height',(pageHeight)+'px');
}
}
hide_addressbar();

の部分

ただし、これだけだとせっかく隠しても
ユーザーが上にスクロールすると
隠したアドレスバーが出てしまう

このため、その対処として
スクロール時に画面が一番上に達したか
チェックし、
到達したなら強制的に1px下げることでアドレスバーを隠す

その処理が

$(window).on('scrollStop',function(){
hide_addressbar();
});