Web Mobile Support

From Xojo Documentation

Web apps can be a great way to provide mobile apps for your users and customers.

General Mobile Support

Use the WebSession.Platform property to determine the platform that your web app is running on. With this information, you can choose to display a page that is specifically designed for the smaller screen of an iPhone, for example. This code in the WebSession.Open event handler displays the appropriate page for the device being used:

Select Case Self.Platform
Case WebSession.PlatformType.iPhone
Case WebSession.PlatformType.AndroidPhone
Case Else
MainPage.Show // All other devices
End Select

Pages are resized to the screen size or the page MinimumHeight and MinimumWidth. If either minimum value is larger than the actual screen size, the user is able to scroll the web application. If the minimum is smaller than the actual screen size, then the entire web page is visible.

The WebSession.OrientationChanged event allows you to know when the user has changed the device orientation. You can use this to display a different page if appropriate.

Zooming is locked to 100%, which prevents the page size from changing allowing it to look best on mobile devices.

iOS and Android

With iOS and Android, the user can “bookmark” a web page to the home screen. When the user does this with a web app, the icon you have specified for the loading screen is used as the icon on the home page.

To add a web app to the iOS home screen, you open it using Mobile Safari and then click the "Sharing" button and choose "Add to Home Screen". This creates an app on your home screen that uses the icon you specified for the web app. When you click on the icon on the home screen your app launches without any of the usual Mobile Safari controls.

However, if you have an iPhone 5 or later you may notice that the web app does not use the full screen height when you launch the app from the home screen. There are black bars at the top and bottom of the screen.

This is not a bug in your web app, but it does require you to adjust a hidden iOS setting. Specifically, you need to override the viewport so that it does not use the default setting.

In the case of a Xojo web app, this means using the WebSession.PrepareSession event handler. In it you can add code like this to specify a new viewport:

Select Case Me.Platform
Case WebSession.PlatformType.iPhone
// Allow iPhone 5+ to scale a web app to use entire screen height when
// it is launched from the home screen
HTMLHeader = "<meta name='viewport' content='initial-scale=1, viewport-fit=contain' />"
End Select

With this code, the web app now uses the full screen size.