保持页脚可见，除非在 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";
                    }
                }
            };
        }