Question

我正在编写一个脚本，该脚本在单个页面网站上的多个完整页面高度元素中使用一些绝对定位的元素。在移动视图中，此页面明显大于视口，因此我使用JQuery来调整父级的大小。这适用于大多数设备，但在其他设备上，父设备的高度不会扩展。

每个页面的HTML都是这样开始的，整个页面上有四个这样的实例：

function em(input) {
  var emSize = parseFloat($("body").css("font-size"));
  var em = emSize * input;
  return em;
}
$(document).ready(function() {
  $('.page').each(function() {
    $(this).css('height', $(this).children('.stuff').outerHeight() + 30 + em(4));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="services" class="page">
  <div class="image" data-type="background"></div>
  <div class="container stuff">
    ...
  </div>
</div>

我所拥有的最大的是iPhone 5，它在我尝试过的所有其他设备上看起来都是正确的。有什么想法吗？

编辑：让我更好地解释一下网站。所以我有一个单页网站，里面有多个部分（页面），每个网站的最小高度为100vh。根据屏幕的大小，其中一些大于100vh并与下一部分（页面）重叠。我试图使用上面的JQuery来调整页面大小，所以这不会发生。它适用于大多数设备，但不适用于其他设备，特别是iPhone 5。

设置div高度不适用于iPhone

0 个答案: