【android】ソフトウェアキーボード出現によりviewportを縮める件 #JavaScript

はじめに

webページのレスポンシブ対応をしている時にandroidはソフトウェアキーボード出現によってフッターを持ち上げてしまい、画面の見栄えがよくなかったのでそちらを修正しました。
次回同じ課題にぶつからないように忘記録です。

修正方法

index.htmlファイルに直接javascriptを記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1 ,maximum-scale=1"
    />
  </head>
  <body>
   /* ここを追加するだけです */
    <script>
      let viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute("content", viewport.content + ", height=" + window.innerHeight);
    </script>
　　/* ここを追加するだけです */　
    　　　　　　　　　　　　　　・・・省略
  </body>
</html>

簡単です。上記コードを追加するだけで持ち上がりは解消できます。

まとめ

持ち上がり自体は解消できましたがiPhoneと同じ挙動にはなりませんでした。(javascriptで他にも制御が必要かもしれません。)
フッターにfixed使っていれば上のコードでも関係なく持ち上げられます。(画面でみてしまうので)

レスポンシブ対応は他にもアドレスバーの出現で高さが変わる問題など勉強することが多そうです。めげずに頑張ります。