In Capacitor, in a vanilla html/css/js project (no vue, angular, or react), is there a way to automatically move the top of an app’s window below the status bar and/or camera of the mobile phone on which it is running so that the app’s navbar doesn’t get obscured by the time/camera/battery meter?
We’re trying to port an existing Bootstrap5 project to Capacitor, but can’t quite figure out how to do this.
Take a look at the @capacitor/status-bar plugin. I think you want the setOverlaysWebView option.
The problem still persists when using @capacitor/status-bar and setOverlayWebView. The top of my webapp displays behind the camera/time/etc instead of starting below the camera’s status bar.
Look at safe padding then - Advanced Theming: Quickly Customize App Colors using CSS | Ionic
EDIT
Oh, you aren’t using Ionic 
Add padding yourself to your app then.
Did you set it to true or to false?
If you set it to true, you app content will be show overlapped with the status bar, if you set it to false then the status bar will be solid and you app will be under it.
Note that it only works on Android, on iOS you have to use css to avoid the status bar area.