当汉堡菜单点击 Saf 时背景图像放大答案

【问题标题】：Background image zooming in when hamburger menu clicked on Saf当汉堡菜单点击 Saf 时背景图像放大
【发布时间】：2017-09-03 01:38:15
【问题描述】：

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

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

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

【问题讨论】：

你能在ul.topnav上试试width: 100%吗？
嗨，移动IOS的问题似乎与修复的bg附件有关，请尝试使用此答案提供的解决方案stackoverflow.com/a/21456799/2887133

标签： javascript html ios css

【解决方案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

【讨论】：