Question

当我在iPad / iPhone上测试this page时，它只显示第一张图片，而不显示其余图片。

我的HTML / CSS是否有问题，或者我将不得不开始使用媒体查询或类似的东西？

http://codepen.io/alsjohnstone/pen/oEKfc

<meta name="viewport" content="width=device-width" />

<!-- Navigation -->

<div class="navigation">
            <div class="inner">

<ul>
  <li><a href="#slide-1">ONE</a></li>
  <li><a href="#slide-2">TWO</a></li>
  <li><a href="#slide-3">THREE</a></li>
  <li><a href="#slide-4">FOUR</a></li>
</ul>
            </div>
</div>

<div id="skrollr-body">

<!-- Section 1 -->

<section id="slide-1">
<div class="bg" data-top-top="background-position: 0% 0px;" data-bottom-bottom="background-position: 0% -100px;"></div>
</section>

<!-- Section 2 -->

<section id="slide-2">
<div class="bg"></div>
</section>

<!-- Section 3 -->

<section id="slide-3">
<div class="bg"></div>
</section>

<!-- Section 4 -->

<section id="slide-4">
<div class="bg"></div>
</section>

</div>

CSS

html, body {
  height:100%;
  width:100%;
}

section {
  height:1000px;
  position:relative;
  display:block;
}

.bg {
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background size: cover;
  width:100%;
  height:100%;
  position:relative;
}

/* Main Navigation */   

.navigation {
  position:fixed; 
  top:0;
  z-index:99999; 
  width:100%; 
  padding:10px; 
  background-color:#000;
}

.navigation ul {
  list-style-type: none; 
  margin: 0; 
  padding: 0;
}

.navigation li {
  display:inline; 
  text-decoration:none;
}

.navigation a {
  display: inline-block; 
  margin-left:30px; 
  vertical-align:middle; 
  background-color: #000; 
  text-decoration:none; 
  color:#EFEFEF
}

/* section 1 */

#slide-1 .bg {
  background-image: url('http://i.imgur.com/lklWa7e.jpg');
}

/* section 2 */

#slide-2 .bg {
  background-image: url('http://i.imgur.com/fBzbkrr.jpg');
}

/* section 3 */

#slide-3 .bg {
  background-image: url('http://3.bp.blogspot.com/-IYmB20ch7EA/UhETyjIcndI/AAAAAAAADgU/hu8NEmCz_0c/s1600/1150736_10151773182603618_1631854368_o.jpg');
}

/* section 4 */

#slide-4 .bg {
  background-image: url('http://4.bp.blogspot.com/-mMxGA3yHWsY/UyW-z8W6pkI/AAAAAAAABDw/DFE7O1lLwEc/s1600/Koch.jpg');
}

为什么在iPad / iPhone上无法正常显示？

0 个答案: