検索

ホームページ  >  に質問  >  本文

Chrome モバイル ウェブでレイアウト/ビジュアル ビューポートを変更した後、タイトルをビジュアル ビューポートの上に表示し続けるにはどうすればよいですか?

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

＃＃＃目標＃＃＃

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

背景コンテキスト

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

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

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

Chrome チームが推奨する、

env(keyboard-inset-height)

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

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

HTML

リーリー

CSS スタイル

リーリー

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

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

全員に返信(1)返信します

  • P粉573943755

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

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

    解決策を見つけました

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

    リーリー リーリー

    返事
    0
  • キャンセル返事
    •