モバイル画面の全画面表示について

bubble
, ,
1

いつも質問させていただき有難うございます。
知識不足で壁にぶつかり前に進めなくなりました。
よろしくお願いいたします。

実装したい内容
モバイル画面（iphone）でURLバーを非表示にさせ、アプリのように全画面表示にさせたい。

問題点
ノーコードラボさんのPWAにする方法まではできましたが、ボタンからページ遷移した場合にブラウザ（safari）へ飛ばされ、アドレスバーが表示されてしまいます。
https://blog.nocodelab.jp/entry/pwa-a2hs

いくつかのサイトで対策は記載されていましたが、bubbleでの実装方法がわからず、参考サイトにはJavaScriptを使用すれば実装可能と記載されていますが、知識不足で実装できていない状況です。
参考サイト

試した内容
参考サイトの下記のJavaScriptをいくつか貼りつけて試しましたができませんでした。
Javascript

①Script/meta tags in header
②Script in the body
③各ページのPage HTML Header
Toolboxのプラグインをインストール
④ページ遷移先のpage is loadedでRun JavaScript
⑤ページ遷移する際のボタンでRun JavaScript

実装できる方法がありましたら、ご教授をお願いいたします。
よろしくお願いいたします。

「いいね！」 1
2

参考にされているサイトに書かれているようにリンクを踏んだ時にSafariに飛ばされているのだと思います。
そして、解決方法としてaタグをクリックしたときに遷移先を変更するJavaScriptを書かれたのですね。
おそらく、画面遷移する要素がaタグで囲われてないのかなと思いました。
リンクが張ってある要素をデベロッパーツールを表示したときに以下のようにaタグで囲ってあるか確認をお願いします。

2022-05-09_16h08_32
2022-05-09_16h08_321274×750 93.7 KB

もし、divタグしか確認できないようでしたら、elementsのLinkを使ってみて遷移を確認してみてください。おそらくHiroooさんの追加したJavaScriptが機能するはずです。

「いいね！」 1
3

john03tgck01a様
ご回答誠にありがとうございます。
お礼のご連絡が遅くなりましてすみませんでした。

ご回答の内容で、デベロッパーツールの表示を確認しましたが、divタグしか確認できませんでした。
そのため、Linkを使用したのですが、同様に実装ができませんでした。

現在のところ下記の認識かと思われますが、②の問題が解決できる方法がありましたら、是非ともご教授いただけますと助かります。

①モバイルのsafariでアドレスバーを非表示にする場合
ノーコードラボさんのPWAにする方法などでindex画面は非表示設定が可能

②ページ遷移した場合
アドレスバーは表示されませんが、代わりにツールバーが画面上下に表示される。
※上部ツールバーには完了ボタンが有り、押すとindexに戻ってしまいます。
アドレスバーは非表示になるためjavaScriptは機能していると思われますが、代わりのツールバーが表示され、全画面にはならないsafariの仕様な気がします。
キャプチャ

「いいね！」 2
4

Link elementを使用するとdivタグの中にaタグが入り、テキストはdivタグで囲われるようです。
2022-05-16_10h41_28

iPhoneが無いので試すことができないのですが、Safari側でツールバーを非表示にする設定がありました。

ということはアプリ側から制御することも可能だと思い検索してみました。
「Safari ツールバー非表示 Javascript」

window.onload = function() {
    if(window.scrollY == 0)
        setTimeout(function(){window.scrollTo(0,1);}, 100);
}

ほとんど同じですが、こちらも試してみてはいかがでしょうか。

window.addEventListener("load",function() {
    setTimeout(function(){
        // This hides the address bar:
        window.scrollTo(0, 1);
    }, 0);
});
「いいね！」 1
5

john03tgck01a様
ご回答いただき、まことに有難うございます。
1pxスクロールはタイミングによっては動作しない場合があり、スクロールを上に戻す動作をするとアドレスバーが表示されてします。
残念ですが、使用者自身が非表示設定しない限り、完全にはアドレスバーを非表示にできない気がします。
いろいろと調べていただき本当に有難うございました！
感謝です。

「いいね！」 2
6

直接的な解決方法になるかはわかりませんが、
css_browser_selector.js というJavaScriptのライブラリを導入すれば、
ブラウザ毎にCSSを設定できるようになります。
ご参考までに↓

「いいね！」 2
7

Aki_Sydney様
有難うございます。
いろいろな方法があって、勉強になります。
解決に向けて模索してみます。
ありがとうござました！

「いいね！」 1