Question

我在一个简单的乐队网站上工作。您可以查看here。在桌面版上，一切都很好，但在我的iPhone上，当点击汉堡包菜单时，背景图像会放大。我假设这是因为打开菜单时页面的高度会发生变化，导致网站调整页面高度以适应其他内容。我希望移动网站的行为与桌面网站相同：背景是一个不重复的固定封面。这是我的第一个项目，因此非常感谢任何帮助/建设性意见！

＆＃13;

html {
  background: url(264H.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  font-family: Futura, sans-serif;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {
  background-color: #555;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.parent {
  margin: 0 auto;
  width: 75%;
  background-color: white;
  border: 2px solid black;
  background-color: rgba(255, 255, 255, 0.5)
}

.child {
  width: 75%;
  padding: 3px;
  border: 1px solid black;
  margin: .5em auto;
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}

.video-container iframe,
.video-container object,
.video-container embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#footer {
  text-align: center;
  bottom: 0;
  width: 100%;
}

#content {
  width: 80%;
  max-width: 576px;
}

＆＃13;

<ul class="topnav" id="myTopnav">
  <li><a href="index.htm">BE COOL COWBOY</a></li>
  <li><a href="releases.html">Releases</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="https://becoolcowboy.bandcamp.com/merch/mammoth-sticker">Merch</a></li>
  <li><a href="http://becoolcowboy.bandcamp.com">Bandcamp</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

<!-- Begin Songkick Shows Widget -->

<a href="http://www.songkick.com/artists/8724879" class="songkick-widget" data-theme="light" data-track-button="on" data-detect-style="true" data-font-color="#ffffff" data-background-color="transparent"></a>
<script src="//widget.songkick.com/widget.js"></script>

<!-- End Songkick Shows Widget -->

<br></br>

<!--Social Media Icons Footer-->

<div id="footer" style="text-align:center;">
  <a href="https://facebook.com/becoolcowboy"><img border="0" alt="Be Cool Cowboy Facebook" src="faceicon.png" width="42" height="42"></a>
  <a href="https://twitter.com/becoolcowboy"><img border="0" alt="Be Cool Cowboy Twitter" src="twiticon.png" width="42" height="42"></a>
  <a href="https://instagram.com/becoolcowboy"><img border="0" alt="Be Cool Cowboy Instagram" src="instaicon.png" width="42" height="42"></a>
  <a href="https://www.youtube.com/channel/UCsA_q-aK0mVF0H6IBe8pQlg"><img border="0" alt="Be Cool Cowboy YouTube" src="yticon.png" width="42" height="42"></a>
</div>

<!--navbar script-->

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

＆＃13;

Answer 1

为容纳background-image的容器添加最大高度，在您的情况下为<html>。

html {
  background: url(264H.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 100vh;
}

将max-height设置为100vh（vh是视口单位.vh是视图高度），将确保容器的高度不会超过视口高度，从而将图像包含在可见的视图中用户 - 无论可能切换其他DOM节点的任何更改。

有关视口单元的更多信息及其支持：http://caniuse.com/#feat=viewport-units

当汉堡包菜单点击Saf时，背景图像放大

1 个答案: