当汉堡包菜单点击Saf时放大背景图片
问题描述：
我正在为一个乐队制作一个简单的网站。你可以查看它here。在桌面版上，一切都很好，但在我的iPhone上，点击汉堡菜单后，背景图放大。我假设这是因为页面的高度在打开菜单时发生变化，导致网站调整页面的高度以容纳额外的内容。我希望移动网站的行为与桌面版网站相同：背景是一个不重复的固定封面。这是我的第一个项目，所以任何帮助/建设性的意见将不胜感激！当汉堡包菜单点击Saf时放大背景图片
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()">☰</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>
答
增加最大高度，以持有该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
你可以尝试'宽度：100％'的'ul.topnav'？ – PumpkinSeed
你好，似乎与移动IOS的问题是有关的固定bg附件，请尝试使用此答案提供的解决方案http://stackoverflow.com/a/21456799/2887133 – DaniP