When I view my app on a mobile browser (chrome) I have noticed that the address bar pushes the webview down and he footer nav is no longer visible and I have to try and scroll the page down to try and fit it, however its kind of wonky.
Question is, is there a way to have the screen fit the display area for a smoother experience? Not sure if this is a scroll into view or maybe triggering a full-screen display? Anyhow thought I would ask.
Thanks!
If your app is performing this way on a mobile browser, then you should also check your app in devices of varying screen heights (ie iPhone 11 vs iPhone SE), because you may have accidentally hard-coded a specific height for your app (potentially whatever your dev simulator’s height was).
Instead you should have a responsive height, so the viewport flexes to accomodate varying device sizes. In the case of a footer which must remain at the bottom of the screen, consider the toolbar/tabbar component.
It is set to be an auto height / width, so Iphone, ipad, android scale properly (when wrapped with something like cordova)
The issue seems to be when I view the app in a standard web-browser, when it loads up the browser address-bar pushes the viewport down so the footer is hidden so I have to scroll the whole window up to see the footer.
I’m thinking I may just need to have an option to put the browser in full-screen mode on mobile so it will display properly.
Thanks for feedback!