WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

WEBサイトをiOSでアプリケーションのように表示

WEBサイトをiOSで見た時にSafariのアドレスバーやツールバーを表示させたくない場合
アプリケーションのように表示する方法

HTMLのheadに下記metaを記入する

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

SafariのUIを変更してくれる。

ページ遷移をするとSafariに飛んでしまうので
JavaScriptでそのまま画面遷移するように制御する。

var anchor = $('a[target="_self"]');
anchor.each(function(){
  var url = $(this).attr('href');
  $(this).removeAttr('href');
  $(this).click(function(){
    location.href = url;
  });
});

※ブラウザのバーが出ないので前の画面に戻ることができない。
※いきなりSafariで開くのではなく、ホーム画面に追加してから
 起動する。