iPhoneやipadでアドレスバーを非表示にしてフルスクリーンモードにすることで、サイトをアプリっぽく表示する、apple-mobile-web-app-capableと、ステータスバーの表示を変更できるapple-mobile-web-app-status-bar-styleのメモ。
もくじ
webアプリ関連記事
jQueryとaudioタグでクリックすると音が鳴るiOSのwebアプリを作る
iPhoneでアドレスバーを非表示にしてサイトをアプリっぽくする、apple-mobile-web-app-capable
apple-mobile-web-app-capableとは
apple-mobile-web-app-capableはiosのSafariで使えるmetaタグで、設定することでiosのSafariのUIを変更することができます。
apple-mobile-web-app-capableで変更できることは、
ウェブサイトをアドレスバーを非表示にしてフルスクリーンモード(全画面表示)で表示します。
しかしステータスバーは常に表示されます。
表示させるための方法は、普通にSafariで開くのではなく、
ページを「ホーム画面に追加」してホーム画面の登録したアイコンから起動するとフルスクリーンモードで表示できます。
この方法で起動するとSafariとは別に開かれてWebアプリモードでアプリっぽく表示できます。
apple-mobile-web-app-capableの使い方
head内にmetaタグとして下記のコードを書くだけでできます。
<meta name="apple-mobile-web-app-capable" content="yes">
apple-mobile-web-app-capableの注意点
1つ目が、ページ遷移がある場合(ページ内リンク以外)だとSafariへ移動してしまいます。
Webアプリモードのまま、ページ遷移するにはJavaScriptでリンク先を制御する必要があります。
2つ目は、ステータスバー以外を消してしまってるので元のページに戻れないため、戻りリンクが必要になります。
3つ目は、viewportの設定でwidth=device-widthとするとiPhone5で見たときにiPhone4の画面サイズになるらしい。
私の端末が6sなので確認できず、本当に必要になったら調べようと思います。
1と2の解決方法はこれでいいかなーと思います。
$(document).ready(function() {
$('a:not(".back")').each(function(){
var link = $(this).attr('href');
$(this).removeAttr('href');
$(this).click(function(){
location.href = link;
});
});
$('body').append('<a class="back" href="javascript:history.back();">戻る</a>')
});
<a class=”back”>以外のaタグに適用し、hrefを取得してaタグがクリックされたときにリンク先に移動します。
$(‘a:not(“.back”)’).each(function(){としてるのも全てのリンク先に戻るボタンは必要だし、戻るボタンのデザインもcssでつけると思うので<a class=”back”>以外という指定にしています。
apple-mobile-web-app-status-bar-styleとは？/使い方
これもiosのSafariで使えるmetaタグで、設定することでiosのSafariのUIを変更することができます。
apple-mobile-web-app-status-bar-styleの指定でステータスバーを変更できます。
設定できる値は、
- default
- black
- black-translucent
です。これもhead内にメタタグでこう書く。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
apple-mobile-web-app-capableを指定する場合は、apple-mobile-web-app-status-bar-styleも必ず設定するようです。
apple-mobile-web-app-status-bar-styleはios9で使えなくなってるみたいで実機では確認できてません。
デモはiPhoneから確認してみてください。
コメント