11月リリースのAndroid Chrome108からビューポートの扱いが変わります

対処法

<meta name=viewport> に、interactive-widget を設定しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">

iOSのキーボード出現時の挙動と同じになりましたので、iOSで問題なく動いてる場合は、この対処は不要です。切り分けを行っている、もしくはAndroidファーストで設計しているという場合は対処が必要です。

概要

2022年11月リリースのChrome108から、Android Chromeはスクリーンキーボードが出現した時のレイアウトビューポートの仕様が変わります。

vwやvhなどビューポート依存の単位や、 position: fixed; bottom: 0 で配置されたDOMの振る舞いが変わります。

どう変わるかなどは以下の記事を参照してください。

https://developer.chrome.com/blog/viewport-resize-behavior/

とても重要なニュースなので知る機会を増やすために本記事を書いていますが、上記記事（英語）にすべて必要なことは書かれています。 英語記事ですが、Google翻訳で問題なく日本語に翻訳できる英語で書かれてるので、解説記事よりちゃんと原文をお読みください。