【Android】Webページでソフトウェアキーボードを呼び出すとviewportの高さが狭まる

スマートフォンで入力フォームにフォーカスをあてるとソフトウェアキーボードが出現するが、position: fixedで画面の下部に固定した領域（フローティング領域）がiOSとAndroidで挙動が異なっていた

特に困ったのはAndroidの方で、キーボードが呼び出されるとviewportのサイズが変更されるみたいで、フローティング領域がキーボードの上に固定されてしまう

これによってユーザーが見える部分がかなり狭くなってしまう

これを解決したい

キーボードが呼び出されたことの検知

いろいろ調べたが、キーボードが呼び出されたことを検知するにはresizeを使うのがよさそう

window.visualViewport.addEventListener('resize', resizeHandler);

これで、キーボードが呼び出されたときにresizeHandler関数が実行される

キーボードの高さ分フローティング領域を下げる

キーボードが呼び出されたときに、フローティング領域がキーボードの高さ分上がってしまうのであれば、その分フローティング領域を下げてしまえばよいのではないかと考えた

そこでinnerHeightをみたところ、Androidではキーボード呼び出し前と後で変化があった

つまり、キーボード呼び出し後のinnerHeightから呼び出し前のinnerHeightを引けばキーボードの高さが取得できるので、transform: translateY()でフローティング領域を下げれば元の位置に戻るはず

ということで全体的に以下のようにしてみた

<script>
    var float = document.getElementById('float');
    var originalViewport = window.innerHeight;

    function resizeHandler() {
      var keyboardHeight = originalViewport - window.innerHeight
      float.style.transform = 'translateY(' + keyboardHeight + 'px)'
    }

    window.visualViewport.addEventListener('resize', resizeHandler);
</script>

これでとりあえず問題は解決したが、SPAでページ遷移でどうなるかなどは検証していない

そもそもこのような端末差異をJavaScriptで解決したくないので、このままではダメかを提案したい

参考

https://www.py4u.net/discuss/680349

https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

https://twitter.com/tonkotsuboy_com/status/1362367890637266949