Make mobile webapp use full screen

Ionic Framework
1

Is there a way for an ionic mobile webapp (not a native app) to go fullscreen or at least hide the browser’s navbar so it can use more screen space ?

TIA

2

Yes, you need to handle that responsiveness yourself using css and ion-grid.

3

Yes you can hide the top navbar of the mobile screen by using an ionic plugin https://ionicframework.com/docs/native/status-bar

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.hide();
});
}

4

Thanks, but that is a capacitor plugin. As far as I know, that will only work if I generate an APK and run the app as a “native” app, and that’s not my case. I am not generating an hybrid app but a PWA that is being hosted in remote server and called from the device’s browser.

As I understand, under that scenario, Capacitor plugins won’t operate, right ?

5

I apologize for the oversight. Cordova will indeed be suitable for developing hybrid applications. Thank you for clarifying.

6

Correct, Cordova is required to use plugins. As a PWA though you may still have options, but they’re outside the scope of Ionic. Display your PWA / website fullscreen - DEV Community

7

Well, the solution was to add the app to the homescreen. When launched from the Homescreen the app goes automatically in “standalone” mode and uses the whole screen with no address bar or status bar.

1 Like