iPad网页视口大小

Question

我正在为多个设备和浏览器（桌面和移动设备）开发特定的网页布局。我希望网络应用程序始终全屏显示，不向任何方向滚动。

我正在使用JavaScript来读取屏幕(document.documentElement.clientWidth, clientHeight)的可用高度和宽度，然后将我的元素设置为适合。在我的简单测试用例中，我有一个绝对定位的div标签(top:0; left:0;)，宽度和高度设置（通过JavaScript）比屏幕宽度和高度小4个像素，所有4个边都有2px宽的边框。

在几台Android设备上的桌面浏览器和Chrome上，它按预期工作 - 我看到边缘处的边框一直没有滚动。

然而，在iPad 2和iPad Mini（Safari）上，得到的div是正确的宽度，但是20像素太高了 - 我必须滚动一下才能看到底部边框。

当我使用CSS执行此操作时，我得到了相同的结果：

  #borderDiv {
    position:absolute; top:0; left:0; right:0; bottom:0;
    border:2px solid black;
  }

我正在使用：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

为什么我在iPad设备上出现“错误”的高度结果？

大卫