はじめに
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使っていれば上のコードでも関係なく持ち上げられます。(画面でみてしまうので)
レスポンシブ対応は他にもアドレスバーの出現で高さが変わる問題など勉強することが多そうです。 めげずに頑張ります。