WEB制作(html・css(スタイルシート))に関する各種メモ書き

スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

● スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。

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

● 別のページに画面遷移しても フルスクリーンを保った状態にする

<link rel="manifest" href="/manifest.json">

サイトのトップ、ディレクトリに manifest.json ファイルを以下の内容で作成します

{
  "name": "マイスマホアプリ",
  "short_name": "マイスマホアプリ",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#fff",
  "theme_color": "#fff"
}

PWAの manifest.json で実現できること | hifive開発者ブログ

関連エントリー

No.998
01/13 12:02

edit

携帯スマホサイト