javascript - Android 平板电脑上的单页 Web 应用程序高度问题

Question

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

我找到了一个部分修复，其中涉及将主体高度设置为等于页面加载时的窗口高度，以及方向更改:

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

这解决了高度挤压问题，意味着可以使用该表单，但是在用户在软键盘打开时更改方向的情况下会出现问题。

方向更改后键盘保持打开状态，并且窗口高度(和主体高度)更改为高度减去键盘。当视野变得模糊并且键盘消失时，机身仍然保持降低的高度，并且底部有一个令人讨厌的白条。

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

• 横向 - 闭合键盘:688px
• 横向 - 打开键盘:273px
• 肖像 - 闭合键盘:1168px
• 肖像 - 打开键盘:716px

如果从横向 - 打开键盘切换到纵向 - 打开键盘，然后关闭键盘，主体高度仍为 716 像素，底部会出现一个白色条。我需要以某种方式计算出在方向改变时闭合键盘应具有的高度，同时键盘仍处于打开状态。请记住，设备分辨率、应用程序镶边和键盘尺寸会有所不同。

Answer 1

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

例如CSS

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

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