I'm slightly reluctant to ask as there are a lot of SO answers/posts/articles that supposedly cover this, however after many hours attempting numerous solutions I've been unable to get this working.
The issue is that on a mobile browser, specifically android on a Samsung Galaxy S7 - there is no way to compensate for the address bar, which means if I have full height elements they are cut off at the bottom, or fixed vertically centered elements, they are actually offset and not centered ( when the address bar is showing ).
Some of the solutions I've tried include:
Various javascript/jQuery measurements..
window.innerHeight
$(window).height()
etc...
None of which update when scrolling and thus hiding the address bar.
Some CSS such as..
min-height: -webkit-fill-available !important;
Posted solutions such as
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
CSS3 100vh not constant in mobile browser
And also playing around with the viewport meta tag..
Regardless of what I try, the height does not update and the CSS values are specific only to the viewport without the address bar which throws off my layout.
Any help would be massively appreciated!