あんパン

こしあん以外は認めない

Firefox OSでキーボードが出たときのウィンドウサイズ

Firefox OSにおいてテキストボックスなどにフォーカスしてキーボードを出す際、ウィンドウサイズが強制的に小さくなり場合によってはスクロールできなかったものができてしまう、という現象があります。

メモアプリを作る際、テキストエリアにフォーカスしない状態ではスクロールバーが出ていなくてもフォーカスするとウィンドウサイズがキーボードで隠れた分だけ狭まるのでスクロールできてしまう、というような例が挙げられます。

一つの言語のみに対応するのであればキーボードの高さを予め調べておいてハードコードするのもアリですが、複数の言語に対応する場合はこれをすることができません。(言語によってキーボードの高さが違います。)

この時、以下のコードで回避することができます。

$(window).on('resize', function(){
  var windowheight = $(window).height();
  // some proccesses
});
$('#target_textarea').focus();

resizeイベントを検出後、狭まった後のウィンドウサイズを検出することができます。これを元にCSSをJavaScriptで変更すれば良いと思います。

言われてみればそうだろうなぁ、という感じですが一応メモ。