Web Mobile Support
From Xojo Documentation
Web apps can be a great way to provide mobile apps for your users and customers.
Contents
Displaying a Web App on a Mobile Device
To display a web app on a mobile device, open the web browser on the device and enter the URL for your web app.
If you are testing the web app and running it from Xojo, you can display it on the mobile device as long as it is on the same network as the running web app and can connect to the computer. For example, if you run a web app from Xojo on a computer with the IP address 10.0.1.3 at port 8080, then you would enter this as the URL in the mobile web browser:
http://10.0.1.3:8080
Device 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:
Case WebSession.PlatformType.iPhone
iPhonePage.Show
Case WebSession.PlatformType.AndroidPhone
AndroidPhonePage.Show
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:
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.
Other Notes
Mobile web apps run on the server and the web browser displays the user interface. This means you have to have a network connection in order to use mobile web apps. You cannot create a mobile web app that runs locally, nor can you submit a mobile web app to any App Stores.
If you require a native mobile app, then consider building a native iOS app instead.