Question

简短版本：在我的移动网络应用程序中，我想要始终检测屏幕的可视区域（例如，软键盘顶部（如果存在）和标题栏底部之间的空间），所以我可以调整我的布局，无需缩放，并始终在屏幕上保持页面完全可见。有没有可靠的方法来做到这一点？

更长的版本：在应用程序中，我抓住所有触摸事件并控制平移和缩放自己。控制条固定在屏幕的顶部和底部，始终可见。我的视频设置是：

    <meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=no">

我的愿望是始终将我的页面布局调整到浏览器窗口的可视区域，因此屏幕上没有任何内容。因此，当键盘出现或消失，或方向改变时，我需要检测宽度和高度并相应地重新布局。

如果不适用于屏幕键盘， window.innerWidth 和 window.innerHeight 就足够了。然而，当键盘出现时，事情变得古怪（仅在某些严格控制的条件下工作）。当键盘启动时，天堂禁止改变方向。

DOM中有什么可以告诉我我想要什么吗？我真的更愿意动态地解决这个问题，而不是将界面元素的大小硬连接到我的代码中，但如果没有别的办法，我会诉诸于此。

对于冗长而言，很难捕捉到我遇到的所有奇怪之处。我的测试主要是在运行3.2的iPad和运行4.1的iPhone上进行的。两者之间的行为一直不一致。

Answer 1

与您所追求的最接近的可能是screen.availHeight，它显示屏幕的高度减去标题栏。但是，即使使用window.onresize事件，当您调出屏幕键盘或旋转屏幕时，这也不会改变。我想不出一种考虑到我害怕的方法。