Allowed’s state I have a component that I intend to resize so it precisely fills up the aesthetic viewport when the key-board is broadened, as asked in this inquiry:
In the past, I would certainly utilize elevation: 100vh (with some small adjustments for margin). Nonetheless, since Chrome 108, when the onscreen key-board is open, the aesthetic viewport reduces, yet the format viewport remains the exact same dimension. Considering That 100vh is about the format viewport, the component no more reduces when the key-board opens up.
That Chrome article provides one service, including interactive-widget= resizes-content to the meta viewport tag. This does job, as well as I can establish the component to elevation: 100vh as well as cover both instances.
Nonetheless, I’m asking yourself if there’s one more existing CSS-only service that would certainly help this situation? That is, some type of viewport-relative device that is about the aesthetic viewport as opposed to the format viewport?
