Thursday, September 14, 2023
HomeCSShtml - Exactly how do I scale a component about the Visual...

html – Exactly how do I scale a component about the Visual Viewport (as well as not the Format Viewport) when the on display key-board is up?

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?


Most Popular

Recent Comments