どうやったらWEBサイトをアプリっぽくできる?
スマホでサイトをホーム画面に追加して開くときに、普段ならSafariのURLバーとかが画面下部に表示されるけど、たまに表示されないサイトもありますね。
これは何が違うの??
その違いは以下のコードを設置してるかどうか!!
<meta name="apple-mobile-web-app-capable" content="yes">コード解説!!
これはiOSデバイスでウェブアプリをフルスクリーンモードで実行できるようにするためのメタタグです。このタグをHTMLドキュメントの <head> セクションに追加すると、iOSのSafariがブラウザのユーザーインターフェース（URLバーやナビゲーションボタンなど）を非表示にし、ウェブページをネイティブアプリのように全画面表示します。
ホーム画面用のアイコンも追加しましょう!
ホーム画面でサイトのアイコンを表示するために以下のコードも<head>内に追記しましょう。
hrefには用意したアイコン画像のパスを記述してください。
<link rel="apple-touch-icon" href="">このコードの注意点
- Safariだけに限定される
このメタタグはiOSデバイスのSafariブラウザでのみ動作します。Androidや他のブラウザにはこのメタタグは効果がありません。 - フルスクリーンモードはホーム画面からの起動に限る
このフルスクリーンモードは、ユーザーがウェブアプリをSafari経由で開くのではなく、iOSデバイスのホーム画面にウェブアプリを追加し、そこから起動した場合にのみ有効です。
小林祐也
2024.09.12