web app for mobile and ios bottom bar

Targets Web
1

Hi,
I’m testing the various functionality for developing a web app targeting mobile devices.
I have seen that setting the correct viewport, I can realize a full-size, non scrolling page that adapts well for the various mobile devices screen sizes.

when a scrolling is needed ( i. e. for a list of items ) I’m using Webcontrolwrapper copntrols, where I set the list of items using html ul - li tags, and some custom css, this way I have a more control and better performances compared to using weblistboxes.

So, as I said my pages are the full size of the screen and there is no need of scrolling them, and here comes my problem with ios devices:
safari mobile have a bottom bar, that covers the end of my page.

I have thinked to use the shown event to resize or move some controls to adapt to this, such as:

if Session.Browser = WebSession.BrowserType.SafariMobile then
myWebcontrolWrapper.height = myWebcontrolWrapper.height.Page.Height - myWebcontrolWrapper.height.top - 44 // assuming bottom bar of 44 pixels
end if

but this does not work, it seems that the controls are not resized at run time.

I have also seen around if there is some css / javascript trick to hide the bottom bar of mobile safari, but it seems that there is not a reliable way.

any idea?

thanks

 Giulio
2

Hello Giulio, if your app is for an inhouse or corporate project, like my most recent app. I found it advantageous to get the users on first time use to hit the Share button in iOS Safari, then select Add To Home Screen. Users then have your web page as an app on their iOS home screens, and when launched none of the browser chrome is visible (i.e. no tabs, no top or bottom bars). It gives you a little more screen real estate and makes the app feel immediately more like a native app than a web site. The WebListBox’s scrolling is a problem for me as well. I end up creating [page up (moves focus up x rows), page down (moves focus down x rows) , goto to ‘something’ (jump to brand or region in sales report] buttons at the top and bottom of the WebListBox to take the users mind off finger based scrolling. I know I haven’t provided the magic pill you had hoped for but these techniques are sometimes a reasonable workaround. I hope my reply is welcome.

Kind regards, Andrew