これに関連する質(zhì)問が複數(shù)あることは承知していますが、これらの質(zhì)問がされてからブラウザーチームが変更を行ったため、どれも有効ではないようです。この問題に対する最新の解決策を見つけようとしています。

＃＃＃目標＃＃＃

私の希望は、モバイル Web ブラウザーを使用するとき、特にユーザーが入力フィールドにフォーカスしていて仮想キーボードが表示されているとき、アプリのようなエクスペリエンスを?qū)g現(xiàn)するために、固定ヘッダーを上部に固定したままにすることです。

背景コンテキスト

最近、Chrome モバイルチームは、iOS 上の Chrome および iOS 上のモバイル Safari と一致するように、モバイル Web レイアウトとビジュアルビューポートのサイズ変更方法を変更しました。

David Fedor の記事からのこの GIF は、ほとんどの (すべてではない) モバイルブラウザーの現(xiàn)在の狀態(tài)を非常に簡潔に示しています。これは、オンスクリーンキーボード (OSK、別名仮想キーボード) がビジュアルビューポートを「上に移動」したときに表示されます。フィールドにフォーカスがあります。

私が直面している最大の問題は、OSK が表示されているときに、タイトル要素を視覚的に最上位に保つことができないことです。トップのアプリバーに「保存」という形式のメインアクションがある場合、これは大きな問題です。それはユーザーエクスペリエンスを混亂させ、顧客をイライラさせて離れる原因となるため、これは小さなことではないと私は考えています。

Chrome チームが推奨する、

env(keyboard-inset-height)

を參照する VisualViewport API を試してみましたが、動作しないようです。何かおかしなことをしているのではないかと思われます。レイアウトでENVが正しく設(shè)定されていないなど。私のコード

あまりおかしなことはありません。CSS グリッドを使用してレイアウトを制御します。

HTML

リーリー

CSS スタイル

リーリー

私が取得したのは次の 2 つのスクリーンショットです。1 つは私が望むレイアウトで、2 つ目はカーソルを下部近くの入力にフォーカスすると、ビジュアルビューポート全體が「押し上げられ」、タイトルが畫面外になります。

＃＃＃全畫面表示＃＃＃入力中心タイトルが常にビジュアルビューポートの最上部に表示されるようにする方法は現(xiàn)在ありますか?最近の Chrome アップデート後、現(xiàn)在有効な解決策が見つかりません。

P粉833546953

全員に返信(1)

P粉5739437552024-03-28 11:21:21 1棟

Google Chrome 108 以降の場合は、<meta name="viewport" content="width=device-width,Initial-scale=1.0, Interactive-widget=resizes-content"> 。
viewport メタタグの interactive-widget 屬性に注意してください。

解決策を見つけました

ここで。 Android版Chromeの最新バージョンを確認しました。

リーリーリーリー