iPhoneのキーボードが現れたときの[position:fixed; bottom:0;]の表示位置

Question

テキストの入力フォームにWYSIWYGエディタを追加するにあたり、
WYSIWYGメニューをキーボードの上部に常に表示するようにしたいと考えています。

WYSIWYGメニューを
position:fixed;
bottom:0px;
で設定すればできるのではないかと考え、下記端末で確認してみました。
iOS 8.1(モバイルサファリ)
Android4.1.2（ブラウザ）

画面を開いた状態では、iOS、Androidともに画面下部に表示されるのですが、
テキストエリアをタップし、キーボードが出現したときに

Android･･････キーボードの上部に表示
iOS･･････表示位置変わらず、キーボードの裏に隠れる

のように動作してしまいました。
iOSのキーボードの位置にあわせて表示をする良い方法はございますでしょうか？

宜しくお願い致します。

Answer 1

キーボードが現れた時にキーボードの幅だけbottomの値をずらすという方法が考えられますが、キーボードの幅はデバイスの向きや機種でも変わってしまうのでどれだけずらすかというのが難しいように思います。

もしフォームにフォーカスした時とわかっているのであれば、フォーカスされたタイミングでbottomをずらせばよいのですが、やはりキーボードの幅がまちまちなのでめんどくさそうですね。新機種や新しいOSが出るたびに作りなおす必要がありそうです。

いっそbottom: 0;→top: 0;という風に変更するのはいかがでしょうか。指から遠くなって使いづらくはなると思いますが。