11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Android/iOS】Webブラウザのアドレスバーを非表示にする方法

Last updated at Posted at 2022-02-23

#はじめに
Android/iOSのWebブラウザのアドレスバーを非表示にする方法です。
ネットで調べて出てくることには出てくるのですが、なかなかたどり着かなかったのでQiitaに投稿しておきます。

#やりたいこと
据え置きのタブレット端末でWebアプリを動作させるときに、アドレスバーを非表示にしたい。

調べたところ、Webブラウザの設定でフルスクリーン(アドレスバー非表示)にするのは無理そう。
(フィッシングサイトによる悪用などを考慮している?)

**Webブラウザの設定変更以外の方法でアドレスバーを非表示にしたい。**←今回やりたいこと

#結論
以下のサイトを参考にしました。
[HTML5] フルスクリーンの開始と解除

対象ページのheadタグ内に以下のmetaタグを記述します。

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

<!-- Android用 -->
<meta name="mobile-web-app-capable" content="yes">

対象ページへのショートカットをホーム画面に追加し、ホーム画面から対象ページに移動するとアドレスバーが表示されなくなります。

AndroidのChromeブラウザであれば、対象ページを開いた状態でブラウザのメニューから「ホーム画面に追加」を選択することでショートカットを作成できます。
Screenshot_20220223-131730.png

作成したショートカットから対象ページに移動するとアドレスバーが非表示になります。
Screenshot_20220223-131743.png
(スクショ撮るのにXperia 1を使ってるので画面が長い。。。)

アドレスバーが非表示になりました。
Screenshot_20220222-210550.png

ちなみに、普通に表示したとき(アドレスバーあり)はこんな感じです。
Screenshot_20220222-210438.png

Androidを例にしましたが、iOSでも同様です。

#おわりに
Android/iOSのWebブラウザのアドレスバーを非表示にすることで、Webアプリをネイティブアプリっぽくすることができました。
初めからネイティブアプリで作っていれば、こんなことに煩わされなくて済むんですけどね。
モバイルアプリ開発の知見がまだないので、時間があるときにUdemyあたりで勉強してみようと思います。

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?