6

Web サイトのレスポンシブ デザインを作成しました。これは、ウィンドウの 100% の高さを持つ div 内にある Web サイトのコンテンツに基づいています。問題は、ユーザーが入力フィールドをクリックすると、ブラウザーのサイズが縮小して、携帯電話ブラウザーのキーボードと上部の URL バーの間の領域に収まることです。これにより、キーボードがアップしている間、私のデザインは非常に奇妙に見えます。

これを修正する方法はありますか？これが他のレスポンシブ サイトで発生するのを見たことがありませんが、詳しく観察したこともありません。

私のhtmlファイルの頭には次のものがあります：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

基本的に、キーボードが上にあるときにキーボードでカバーされる領域を非表示にし、上に押し上げてレイアウト全体を押しつぶしたくない.

編集：これを行うことで修正しました

$("#comment-text-area").focus(function() {
    var height = $("body").css('height');
    $("body").css('height', height);
});
4

3 に答える 3

2

おそらく、javascript を使用して入力フィールドがフォーカスされていることを検出し、ウィンドウのピクセル サイズをフォーカス前のサイズに設定し、フィールドがフォーカスされていないときに auto にリセットできますか?

于 2013-10-07T22:33:56.163 に答える
1

私の知る限り、モバイル ブラウザは、キーボードが表示されているときにウィンドウのサイズを変更せず、移動してウィンドウを覆うだけです。

100% の高さを達成する方法に問題があるのか​​もしれません。サイズ変更イベントを処理するベンダー固有の css または JS はありますか?

于 2013-10-07T21:54:48.800 に答える