Mobile web: hide URL and Tab Bar

Targets Web
1

In mobile Safari, when viewing my xojo Web app in Landscape mode, the safari browser shows both the URL bar and the Tab bar. This takes up about 1/4 of the screen height.

On other web pages, the user can simply scroll down a bit, and the URL and Tab bars hide, giving back that screen area.

But in Xojo Web, that doesn’t work.

Is there some way to hide those UI elements, either automatically or by letting the user scroll down?

2

I am also interested in a solution for this.

3

I am not able to reproduce this.
Moving the Xojo web page up (scroll down) works.

Tested on iPhone with Safari and Android with Chrome, landscape.

mobile_landscape
mobile_landscape2048×921 69.2 KB

4

I think I figured it out - it seems that if WebPage.MinimumHeight is taller than the actual screen height, then the user can scroll the page up and the browser will hide the toolbar and URL bar. If MinimumHeight is too short, then this behavior is not allowed.

I discovered this by noticing that in the EddiesElectronics / Web example, the webPage has a minimumHeight of 480, whereas in my app, it was set to 320.

There is a problem however: if you set minimumHeight too high, then the webPage ends up with a bunch of blank/empty content at the bottom.

I think the answer is to set MinimumHeight to the actual screen size + the size of the URL bar and Toolbar, but I’m not sure how to calculate those values…

1 Like
5

This code seems to work for me, testing with a few different iPhone sizes:

event WebPage.Shown
if self.height < 480 then
  self.MinimumHeight = self.height + 90
end if
6

You could just as well provide a webmanifest file and sort it out the offcial way…:wink:

Scroll down on this page to the “display” section:
https://web.dev/articles/add-manifest

Add app.handleurl handler for the webmanifest file and it should do the trick for any device

1 Like
7

It is my understanding that this solution only works when the app is installed as a Progressive Web App (adding a shortcut in the list of apps on the phone).
But it won’t hide the address bar when browsing the web and clicking on a url that opens the app. Am I right?

8

Browsers change so much i don’t know anymore. But at least he can do exactly what he wants.