0
私はバンドのシンプルなウェブサイトで作業しています。あなたはhereを見ることができます。デスクトップ版ではすべてうまく動作しますが、iPhone上ではハンバーガーメニューをクリックすると背景画像がズームインします。私は、これは、メニューが開かれたときにページの高さが変化し、追加のコンテンツに対応するためにサイトの高さのサイズを変更するためだと仮定しています。モバイルサイトがデスクトップサイトと同じように動作するようにしたいと考えています。バックグラウンドは固定されたカバーで繰り返しはありません。これは私の最初のプロジェクトですので、どんな助けや建設的なコメントも大歓迎です！背景画像ハンバーガーメニューをクリックしたときのズームイン
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>
あなたは '幅を試すことはできますか？ – PumpkinSeed
こんにちは、モバイルIOSの問題は、固定されたbgの添付ファイルに関連しているようです、この回答で提供されるソリューションを試してみてくださいhttp://stackoverflow.com/a/21456799/2887133 – DaniP