javascript - 移动 Webkit : reliably detect viewable area in all situations?

Question

简短版: 在我的移动网络应用程序中，我想始终检测屏幕的可视区域(例如，软键盘顶部(如果存在)和标题栏底部之间的空间)，这样我就可以调整我的布局，不缩放，并始终保持页面在屏幕上完全可见。有什么可靠的方法可以做到这一点吗？

---

更长的版本: 在应用程序中，我正在抓取所有触摸事件并自行控制平移和缩放。控制栏固定在屏幕的顶部和底部，始终可见。我的视口(viewport)设置是:

    <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 事件，这在您调出屏幕键盘或旋转屏幕时也不会改变。恐怕我想不出一种方法来考虑这一点。