移动Safari上的高度为100％的Div

Question

我正在尝试制作一个页面，其中“幻灯片”已堆叠，用户必须滚动。每张幻灯片都应该填满整个视口。所以我有这个CSS：

html,
body,
.slide {
  height: 100%;
}

在我的HTML中，我只是

<div class="slide">
  <!-- Content Slide #1 here -->
</div>
<div class="slide">
  <!-- Content Slide #2 here -->
</div>

它很棒。问题是在我的iPhone上，第二张幻灯片不够高 它的大小似乎是用顶部的滚动条计算的，但是当我向下滚动时，没有滚动条。我想我需要jQuery来解决这个问题，但是我该怎么做呢？

Answer 1

如果你想使用jQuery，你可以这个

if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
   $('.slide').css({'height':'100%'});
}