由于网址领域，iPad上的100％高度页面太大了

Question

我有这个页面底部有一个页眉和一个页脚。

article {
  min-height: calc(100vh - 204px);
}

header, footer {
  border: 1px solid #000;
  height: 100px;
}

<main>
  <header>...</header>
  <article>...</article>
  <footer>...</footer>
</main>

DEMO

这样可行，但在iPad上它不适合，页脚的一部分是屏幕（页面太高）。这与浏览器/ safari的标题有关（查看屏幕截图）。没有网址部分页面适合。有办法解决这个问题吗？

Answer 1

您可以尝试使用一些javascript，就像这里描述的那样：

jQuery/JS, iOS 4 and $(document).height() problems

你可以像这样计算页面的高度：

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};