Viewport (removing safari for web app)

Hey,

i’m building an app designed to be saved as a homescreen icon and launched as a webapp. Bubble is awesome for building in things like removing Safari with a simple check box which i’ve done, but I get this gap at the top above content where the time etc is.

Anyway to start content RIGHT at the top?

Even black status bar would be better but:

meta name=“apple-mobile-web-app-status-bar-style” content=“black”

Doesn’t seem to do anything :frowning:

Try that if you’ve not seen it already.

1 Like

Try this in Settings - SEO/Metatags - script tags in the header

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

Simon

Ive tried the snippet suggest here to no avail :frowning:

did you add a > on to the end of the snippet?

Just a thought, but could this have anything to do with Bubble’s progress bar?

Nope, this is because of changes in iOS 11+ Safari, which added some extra white space for devices with rounded screens.

Adding the viewport-fit=cover (the solution that @simon is proposing) will solve this, but… You’ll need to be on a Paid Bubble plan to add custom meta stuff to the page header.

Would be great if this could set as standard on @Bubble’s end.

3 Likes

There is a way to add meta in the header without being on a paid plan. By using the HTML element and <header> whatever you want </header>

1 Like

Hello,
You mentioned [quote=“pauljamess, post:1, topic:54809”]
Bubble is awesome for building in things like removing Safari with a simple check box which i’ve done,
[/quote]. where is the checkbox you mention?
Thanks

In your app’s settings under General > iOS Appearance > Hide Safari UI. :slight_smile:

2 Likes

Hmm, in that case you would have a second < head > within your < body > I think, which wouldn’t be semantically correct. But if it works it works, I guess. :yum:

1 Like

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