Question

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

我找到了一个部分修复，包括设置身高等于页面加载时的窗口高度，以及方向更改：

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

这可以解决高度压扁问题并且意味着可以使用表单，但是在软键盘打开时用户更改方向的实例中存在问题。

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

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

风景 - 封闭式键盘：688px
风景 - 打开键盘：273px
人像 - 封闭式键盘：1168px
人像 - 打开键盘：716px

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

Answer 1

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

E.g。 CSS

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

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

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

1 个答案: