iOS Safariでウェブアプリをフルスクリーン(全画面)表示する

HTML, iOS, Safari, Web

iPad Pro(iOS 11)上ののSafariで全画面で使うウェブアプリ(のプロト)つくる機会があった。
だが,なかなか全画面表示ができない。

ネットで調べてやってみたことは・・

ウェブアプリへのショートカットをホーム画面につくるのだ → もちろんつくってます。
画面回転ロックを解除しろ → もともと解除されてます。
Safariの他のタブを閉じろ → もともと開いてません
HTMLのHEAD要素内に次のコードを入れろ → 入れました。変わりません。

既にウェブアプリはなかなか複雑なコードになっていたのでそれらが悪さをしている可能性も無きにしも非ず。
結局,次の手順で全画面にできた。
原因はわかっていない。
何か知っている方がいたら教えていただけると助かります。

  1. mawatariさんのブログなどを参考に,「このファイルは全画面表示されますよ」といわれているすごくシンプルなHTMLファイルをこしらえる。
  2. HTMLファイルの名前を,ウェブアプリで最初に表示する画面と同じ(index.htmlとか)にしてウェブサーバに設置する。
  3. iPadの「設定」→「Safari」→「履歴とWebサイトデータを消去する」でSafariのキャッシュを削除する。
  4. Safariからウェブサーバにアクセスして画面を表示し,ページへのショートカットをホーム画面に作成する。
  5. ホーム画面に追加したショートカットを開く。→全画面!
  6. 本来見たいウェブアプリのHTMLに差し替えてもう一度ショートカットを開く。→なぜか全画面に!解決!

不思議。

HTML, iOS, Safari, Web

Posted by もち