[解決済み] 仮想キーボードがアクティブなときの画面のスタイル

質問

理想を言えば、インターフェイス全体に カスタムスタイリング を持ち、ios（itouch / ipad）またはandroidの仮想キーボードが存在する同等品に見られるようなものです。詳細については、以下を参照してください。

キーボードが "present"であるときに、アクティブになるように CSS ハッキング ルールをカスタム セットすることも許容できる解決策です。

アンドロイドとiosの両方をターゲットにした、ウェブサイト（HTML/JavaScript/CSS）。 また、中のレイアウトに注意してください。 "fluid"です。

編集してください。 これは、よりデザイン、そしてテキストでした。だから、この変化は混乱させるものではありません。最も低いレベルでは、仮想キーがある場合とない場合のデザインの変化を望むだけです。 (おそらく背景の変更だけでしょう）。

これは良いデザインアイデアか悪いデザインアイデアか、という質問には議論の余地があります。しかし、私はこの質問とは無関係であると感じています。なぜなら、このようなエクスプロイトには、テキスト以外の用途 (ゲームやインタラクティブ メディアなど) があるからです。

それゆえ、懸賞金が発生するのです。 私が取り組んでいたプロジェクトでは、もはや答えを必要としないにもかかわらず、（代替デザインが使用されました）。私はまだ、この質問が回答されることから利益を得ることができると信じています。

デフォルトの動作

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

望ましい動作

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

どのように解決するのですか？

私はよく分からないが、これは望ましい効果ですか？

http://jsfiddle.net/UHdCw/3/

更新

(1). そのウェブサイト＆amp;デバイスのブラウザ上で実行されていると仮定します。そして、画面サイズを確認することで、仮想キーボードの存在を確認することができます。

端末のブラウザで確認する http://jsfiddle.net/UHdCw/8/show/

コード - http://jsfiddle.net/UHdCw/8/

(2). HTML5 & Phonegapでネイティブアプリを構築している場合は、状況が異なります。キーボードの状態を確認するための直接的なAPIフックがないため、キーボードの状態を確認するための 独自のプラグイン を作成する必要があります。

Androidでは、ネイティブコードでキーボードの表示/非表示を確認することができます[... ここでチェック というように、Phonegapプラグインを作成して、HTMLにこれらのイベントを取り込む必要があります。

[Phonegapはその一例です。ほとんどのHTML to Nativeフレームワークがこのようなネイティブコードとのフック性を持っていると思います。］

iOSアップデート

おっしゃるとおり、キーボードがある状態では高さ・位置の変化はありません。ひとつだけできることがあります。それは、入力にフォーカスが当たったときに、shrink クラスを追加して、要素のサイズを小さくすることができます。以下のリンクを参照してください。

http://jsfiddle.net/UHdCw/28/show/