I'm working on my website and I want it to look really simple on mobile, basically there are just three sections, each one should fit window width and height
<section style="width: 100%; min-height: 100%">
</section>
It looks perfect on my computer browser in device mode, but when I open it on my mobile (iPhone), there is a problem with url bar, which gets smaller, as we slide down. On page load, min-height adapts to browser height including the bar, and it doesn't change when bar changes it's dimension. So it doesn't fit the screen anymore. I tried this:
<meta name="viewport" content="height=device-height">
But then, sections are to high, obviously. Probably I could do some workaround in jQuery, but I'd rather not. I hope there is some simple solutions in CSS. Thank you for your time.
The dynamic viewport units should help: https://www.w3.org/TR/css-values-4/#viewport-variants
For example, setting height to 100dvh would make the height equal to 100% of the dynamic viewport height. The dynamic height is affected by any interfaces that are dynamically expanded and retracted, such as the URL bar on a mobile phone browser.
Additionally, at least Chrome on Android requires interactive-widget property in the viewport meta tag. For example: <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">