これに関連する質問が複数あることは承知していますが、これらの質問がされてからブラウザー チームが変更を行ったため、どれも有効ではないようです。この問題に対する最新の解決策を見つけようとしています。
＃＃＃目標＃＃＃背景コンテキスト
David Fedor の記事からのこの GIF は、ほとんどの (すべてではない) モバイル ブラウザーの現在の状態を非常に簡潔に示しています。これは、オンスクリーン キーボード (OSK、別名仮想キーボード) がビジュアル ビューポートを「上に移動」したときに表示されます。フィールドにフォーカスがあります。
私が直面している最大の問題は、OSK が表示されているときに、タイトル要素を視覚的に最上位に保つことができないことです。トップのアプリバーに「保存」という形式のメインアクションがある場合、これは大きな問題です。それはユーザーエクスペリエンスを混乱させ、顧客をイライラさせて離れる原因となるため、これは小さなことではないと私は考えています。
Chrome チームが推奨する、
env(keyboard-inset-height) を参照する VisualViewport API を試してみましたが、動作しないようです。何かおかしなことをしているのではないかと思われます。レイアウトでENVが正しく設定されていないなど。
私のコード
HTML
リーリーCSS スタイル
リーリー私が取得したのは次の 2 つのスクリーンショットです。1 つは私が望むレイアウトで、2 つ目はカーソルを下部近くの入力にフォーカスすると、ビジュアル ビューポート全体が「押し上げられ」、タイトルが画面外になります。
| タイトルが常にビジュアル ビューポートの最上部に表示されるようにする方法は現在ありますか?最近の Chrome アップデート後、現在有効な解決策が見つかりません。 |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Google Chrome 108 以降の場合は、
解決策を見つけました<meta name="viewport" content="width=device-width,Initial-scale=1.0, Interactive-widget=resizes-content">。viewportメタ タグのinteractive-widget属性に注意してください。ここで。 Android版Chromeの最新バージョンを確認しました。