html - 由于 url 字段，100% 高度的页面在 iPad 上太大

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 的标题有关(查看屏幕截图)。没有 url 部分，页面适合。有什么办法可以解决这个问题吗？

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;
};