I'm facing an issue with window height on mobile browsers. I am using css 100vw, but it's not always accurate, especially when the browser displays additional elements like a navigation bar at the top or functional buttons at the bottom.
In simple terms, these extra elements affect the window size without actually changing the computed window size.
To better illustrate my point, I have included videos for reference: When I open the chat window, the height changes when the keyboard appears, but the window size itself remains constant. How can I control this?
In this video, you can see that using CSS height:calc(100vh - px) adjusts the chat window height correctly when the bottom stripe is added.
However, when the stripe is removed, the window height stays the same, making it appear shorter.
Is there a way to accurately determine the height of the mobile window including any additional functionalities such as the address bar, buttons, or keyboard? (Note: The videos were captured on iPhone iOS, and everything seems to work fine on Android.)