28

次の形式のモバイル Web ページがあります。

ヘッダー - ロゴなど - 絶対位置

content - スクロール可能、絶対配置

フッター、40px 絶対配置

コンテンツ領域には複数の入力ボックスがあります。Android の Chrome で、ページの下部にある入力ボックスをタップすると、ソフト キーボードがポップアップしたときに入力が表示されません。ページはスクロールしてボックスを上に移動しようとしますが、実際に表示するには不十分です。フッターの後ろに隠れてしまいます。

これを修正する方法はありますか？これは、Chrome-Android でのみ発生します。iOS の Safari と Windows Phone の IE、およびその他のモバイル ブラウザは問題なく動作します。

4

7 に答える 7

8

これを解決する方法はいくつかありますが、最も明白な解決策は、javascript を使用して URL にハッシュを設定することです。

ここでその例を見ることができます: http://jsbin.com/emumeb/24/quietコード: http://jsbin.com/eumeb/24/edit

もう少し複雑な例として、ヘッダーとフッターが固定されている場合、ターゲットを使用して、ハッシュが設定されているときにページの外観を変更することができます。

レイアウトによっては、もう少しクリエイティブにする必要があるかもしれません。ボディにクラスを設定して、フォーカス状態と非フォーカス状態を区別し、それに応じて UI を変更することもできますが、モバイルやデスクトップなどで優れたエクスペリエンスを維持するのは難しくなります。

例http://jsbin.com/emumeb/30/quietコード: http://jsbin.com/emumeb/30/edit

明らかに、これはクロムがそれ自体で処理する必要があるものです (iOS の UX と同様) 。 4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified .

于 2013-08-08T11:00:21.990 に答える
8

CSS のみのソリューションを期待していましたが、存在しないと思います。Gaunt Face の答えは、それを行う良い方法です。残念ながら、私の場合、これにはいくつかの変更が必要であり、とりわけ自動化を壊す可能性があります (URL に #targets が追加されているため)。

2 つのクリック ハンドラーで位置の種類を変更することでこれを解決しました。

入力/テキストエリアフィールドのクリックハンドラーがあります。そのクリック ハンドラーで、フォーム コンテナー div の位置スタイルを静的に変更します。オブジェクトフィールドにスクロールバーがある場合、これによりフッターが一番下に押し出されることに注意してください。私の場合、これは問題ではありません。キーボードがポップアップしたときに、いくつかのフィールドしか表示されないからです。ユーザーは目に見える違いを見ることはできません。

ユーザーが入力フィールドからクリックしたときの 2 つ目のハンドラー (ページ クリック ハンドラー) があります。ここで、位置の種類を絶対値に戻し、ページを以前と同じように表示します。

これには、意図しない結果が 1 つあります。スクロール位置が失われます。入力フィールドのオフセットを取得し、そのオフセットを使用して親 div で scrollTop を呼び出すことでこれを修正し、位置を復元しました。

これに関するいくつかの質問を見てきましたが、答えが見つかりませんでした。これが誰かに役立つことを願っています。

于 2013-08-08T15:47:36.160 に答える
6

絶対配置から固定配置に変更すると、問題が解決するはずです。ページ読み込み時の初期ページ サイズに対して要素を絶対配置します (キーボードを追加すると、表示されるページが縮小されます)。現在のページサイズに対して要素を固定配置し、要素をキーボードの上に保持します。

#myElement {
  position: fixed;
  bottom: 2em;
}
于 2016-06-22T18:09:00.143 に答える