安卓平板电脑上的单页网页应用程序高度问题

Single page web application height issue on Android tablet

本文关键字：网页 应用程序 高度 问题 单页 平板电脑      更新时间：2023-09-26

我正在研究一个使用身体高度：100%的SPA，其中一个页面包含一个表格，其中包含多个用于输入信息的字段。在 Android 平板电脑上，当您点击其中一个字段时，会出现软键盘，它会调整窗口元素的大小，然后调整正文元素的大小，减去软键盘的高度。这会导致页面降低到低于 300px 的高度，使表单无法使用。在 iPad 上，键盘覆盖在页面顶部，因此窗口高度保持不变。

我发现了一个部分修复，它涉及在页面加载时将正文高度设置为等于窗口高度，以及在方向更改时

： 
$("body").height($(window).height());
window.addEventListener("orientationchange",function(){
   $("body").height($(window).height());
}

这修复了高度挤压问题，并意味着可以使用表单，但是在用户在软键盘打开时更改方向的情况下存在问题。

方向更改后，键盘保持打开状态，并且窗口高度（和主体高度）更改为高度减去键盘。当字段模糊并且键盘消失时，主体保持降低的高度，并在底部有一个讨厌的白条。

为了说明这个问题，这里有一些数字：

  • 横向 - 封闭式键盘：688px
  • 横向 - 打开键盘：273px
  • 纵向 - 封闭式键盘：1168 像素
  • 纵向 - 打开键盘：716 像素

如果从横向 - 打开键盘切换到纵向 - 打开键盘，然后关闭键盘，则机身高度保持在 716px，并在底部放置一个白条。我需要以某种方式计算出在方向更改时使用封闭键盘时它应该达到的高度，而键盘仍然打开。请记住，设备分辨率，应用程序镶边和键盘大小会有所不同。

您可以尝试 CSS vh单位，即视口的百分比。

例如.CSS

body {
    height: 100vh; /* The body element is always 100% of the viewport's height. */
}

在这种情况下，您不需要 JS 事件处理程序。

相关文章：