コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
Chrome モバイル ウェブでレイアウト/ビジュアル ビューポートを変更した後、タイトルをビジュアル ビューポートの上に表示し続けるにはどうすればよいですか?
P粉833546953
P粉833546953 2024-03-28 00:24:35
0
1
362

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

＃＃＃目標＃＃＃

私の希望は、モバイル 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粉833546953
P粉833546953

全員に返信(1)
P粉573943755
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の最新バージョンを確認しました。

リーリー リーリー
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート