CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。 Control the Viewport Resize Behavior on mobile with interactive-widget by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デフォルトのビューポートのサイズ変更動作 metaタグのinteracti

[coliss]

CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できます

[piayo]

デフォルトそうしてほしい。おまじないが増えてる。

[rgfx]

原文によると： "If you would like to see this become available in WebKit/Safari, please go give https://github.com/WebKit/standards-positions/issues/65 a thumbs up."／+1してきた

[poad1010]

この記事をおすすめしました

[fashi]

「CSSのinteractive-widgetキーワード」METAタグに設定するのもCSSなの

[Falky]

なるほどね、meta viewport側の挙動オプションなのか。理に適ってはいるけど、こういうのはCSS側に一元化させてほしいよなー。ややこしくなるから…//ほんで例によってMobile Safariは非対応ですよと…

[tofu-kun]

もう全然わからない