Оставлять нижний колонтитул видимым, кроме случаев, когда виртуальная клавиатура открыта в сети Android?

Question

Мне нужен нижний колонтитул, который всегда отображается на экране, кроме случаев, когда виртуальная клавиатура открыта. Это поведение по умолчанию в iOS, однако в Android нижний колонтитул поднимается над клавиатурой. Можно ли это предотвратить?

<div class="cont">
  <input />
  <input /> 
  <!-- Lots more inputs -->
</div>
<p class="footer">Footer</p>

.cont {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: blue;
  color: white;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/qBbROeG

Answer 1

вот демонстрация с использованием Jquery: https://codepen.io/nomi9995/pen/ZEQLyyy

вот демонстрация с использованием Javascript: https://codepen.io/nomi9995/pen/eYJgLbo

Фактически при открытии клавиатуры. это resize экран. мы можем определить размер экрана и дать bottom до auto, когда клавиатура открыта, и дать основание 0, когда клавиатура закрыта

Jquery

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var sumedges = $(window).width() + $(window).height();
    $(window).resize(function () {
      if ($(window).width() + $(window).height() < sumedges) {
        $(".footer").css("bottom", "auto");
      } else {
        $(".footer").css("bottom", "0");
      }
    });
}

Javascript

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var sumedges = window.innerWidth + window.innerHeight;
            window.onresize = function () {
                if (window.innerWidth + window.innerHeight < sumedges) {
                    const footerArr = document.getElementsByClassName("footer");
                    for (let i = 0; i < footerArr.length; i++) {
                        footerArr[i].style.bottom = "auto";
                    }
                } else {
                    const footerArr = document.getElementsByClassName("footer");
                    for (let i = 0; i < footerArr.length; i++) {
                        footerArr[i].style.bottom = "0";
                    }
                }
            };
        }

введите описание изображения здесь