iPhoneでアドレスバーを非表示にしてサイトをアプリっぽくする、apple-mobile-web-app-capable

プロモーションが含まれています

iPhoneでアドレスバーを非表示にしてサイトをアプリっぽくする、apple-mobile-web-app-capable

iPhoneやipadでアドレスバーを非表示にしてフルスクリーンモードにすることで、サイトをアプリっぽく表示する、apple-mobile-web-app-capableと、ステータスバーの表示を変更できるapple-mobile-web-app-status-bar-styleのメモ。

apple-mobile-web-app-capableのデモ

webアプリ関連記事

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から確認してみてください。

apple-mobile-web-app-capableのデモ

webアプリ関連記事

コメント

タイトルとURLをコピーしました