Forum Academy Marketplace Showcase Pricing Features

Amazed this works! Full screen on iPhone. How is it possible?

I don’t know how you accomplished this since I thought it was not possible to have a fullscreen display in Safari Mobile and much less open in fullscreen as if it was a Native app. but it works.

Try this.

  1. View your bubble app (any mobile page) in Safari in your iPhone (must be your own domain)
  2. Go to the Share icon at the bottom and press “ADD TO HOME SCREEN”
  3. Go to your home screen on your phone and press on the icon you just added

Is it in fullscreen mode, looking just like a native app? It does for me. I am amazed!

Did it work for you? I need help figuring out if this behavior happens to others, as it is a big plus.

This is typical for more recent iOS versions. If you add a shortcut tile to your home screen, the launcher does send specific headers that tell Safari to go full screen. There is an additional fullscreen method that works for me:

Settings -> SEO + Metatags -> Script/Metatags in header

Edit: meta tag disappears on forum, attaching image:

The above allows the browser to go literal fullscreen mode. This is not a good solution if you don’t have back, forward, refresh etc navigation buttons in your app.

I have looked into this before, and there are methods to force this on Android+iOS Chrome browser as well. Worth Googling. If you’re looking to squeeze as much room as possible into the browser, go ahead and play with scrollbar CSS in the same input box:

::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #2A65B0; border: 0px none #2A65B0; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: #4c88e8; } ::-webkit-scrollbar-thumb:active { background: #4a7ccc; } ::-webkit-scrollbar-track { background: #132A54; border: 0px none #132A54; border-radius: 0px; } ::-webkit-scrollbar-track:hover { background: #132A54; } ::-webkit-scrollbar-track:active { background: #060F1D; } ::-webkit-scrollbar-corner { background: transparent; }
1 Like

So I guess this is something that Bubble has put in there when you use a domain name. Correct?

It’s important to know because you will need to make sure that you a the proper navigation is in place as the user can get stuck on your current page as the back and forward buttons are no longer available.

I thought that’s what these checkboxes were for in Settings:

@philip I am very interested in knowing how to make fullscreen work on Android devices. I know you said to Google it, but as a non-coder, the results can be a little intimidating. Could you point me in the right direction?

This topic was automatically closed after 70 days. New replies are no longer allowed.