【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。(1)TagsONZE株式会社オンズ企業サイトへMenu株式会社オンズ開発ブログ【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。Google早速ですが。以下の画像を見比べてください。デバイスは最新のiPhone6を使用。アプリはデフォルトの「Safari」で、左の画像は普通に表示させたもの。右側が、今回紹介する「ウェブアプリケーション・フルスクリーンモード」でサイトを表示させたものです。7.1]のときだけ限定的に使えた「minimal-ui」の進化版で、「フルスクリーンモード」または「ウェブアプリモード」とも呼ばれる表示機能です。内に以下のコードを挿入するだけで実装できます。content="yes">「ウェブアプリケーション」と冠するだけあって、ウェブサイトがアプリのように表示されるのでカッコいいですよね。余分なステータスバーやメニューバー、ツールバーが非表示になるので、ディスプレイ全体に広くコンテンツが配置され、スッキリした印象になります。この「フルスクリーンモード」にも少し注意点があります。それは、ページ遷移するようなリンクをクリックするとデフォルト・アプリのSafariに飛ばされてしまうこと。表示の不具合を調整するために「viewport」も併記しておく必要があることです。「viewport」の指定は以下の記述でOK。content="initial-scale=1.0">リンクによるページ遷移はJavaScriptで調整します。具体的には下記のようなコードを仕込んでおけば良いでしょう。url;});});});このコードはjQueryで書いていますが、内容は「target=”_blank”」の付いたアンカータグを取得してきて「href」属性を削除。クリックイベントをカスタマイズしてフルスクリーンモードが解除されない仕組みになっています。基本ですがフルスクリーンモードを有効化するにはウェブサイトを「ホームに追加」した後、再度アクセスする必要があります。普通のウェブサイトではなく、本当にアプリケーションのように表示されるので応用範囲は広いと思います。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。モバイルデバイス(iPad、iPhone等)でサイトを観覧時に、右側に空白ができてしまう時の解決策。【iOS】リンクをタップしたときのカラーを変更する方法。