When applying height: 100vh to iOS Safari, it utilizes the entire iPhone screen size rather than the visible part excluding the toolbar.
I have researched extensively but have not found a suitable workaround for this issue.
Is there a CSS-only method to set an element's height to the size of the visible screen, regardless of whether a toolbar is present?
I aim to vertically and horizontally center an HTML element, with its width adjusting to the screen width.
Currently, I am using the following CSS code which works well, except on mobile iOS Safari:
.vertical-center{
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}