モバイルデバイスでトグルが動作しない

Question

私は応答性の高いウェブサイトを構築しようとしています。 私は以前に@mediaタグを使ったことがないので、間違っていたかどうかはわかりません。

ウィンドウサイズが550pxより小さい場合、navはスライドトグルメニューである必要があります。

ブラウザのウィンドウを小さくすると機能しますが、自分のiPhoneでは機能しません。 ナビゲーションをトグル550pxに変更し、ヘッダーの高さをトグルの高さ（2em）に変更します。

私があなたを助けてくれることを願っています。

HTML：

<meta name="viewport" content"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 


<div id="header"> 
    <section id="menubar"> 
     <ul> 
      <li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li> 
     </ul> 
    </section> 
     <nav class="nav"> 
      <ul> 
       <li><a href="test.html">test</a></li> 
       <li><a href="test.html">test</a></li> 
       <li><a href="test.html">test</a></li> 
       <li><a href="test.html">test</a></li> 
       <li><a href="test.html">test</a></li> 
      </ul> 
     </nav> 
</div> 

とCSS：

ul { 
margin:0px; 
padding:0px; } 

li { 
list-style:square; 
font-weight:100; 
color:#000000; 
line-height:1em; 
padding:0em; } 

a {text-decoration: none; } 

div#header { 
position: fixed; 
height: 6.250em; 
width: 100%; 
background-color: #fff; 
top: 0; 
z-index: 999; } 

#menubar { 
display:block; 
background:#ffffff; } 

#menubar ul { 
display:block; 
width:2em; 
padding:0.9em; } 

#menubar ul li { 
display:inline; } 

#menubar ul li a.menubutton { 
display:none; } 

#menubar img { 
width:90%; 
height:auto; 
max-width:100%; } 

nav ul { 
display:block; 
position: absolute; 
left: 15%; 
bottom: 0.625em; 
font-size: 0.875em; } 

nav ul li { 
display:inline; 
margin:0em 0.625em 0em 0em; } 

nav ul li a { 
color:#000; } 

nav ul li a:hover { 
color:#cc9900; } 

nav ul li a.active { 
color:#cc9900; } 

@media screen and (min-width:600px) { 
nav.nav { 
    display:block !important; 
} 
} 

@media screen and (max-width:550px) { 
#menubar ul li a.menubutton { 
    display:block; 
} 
nav { 
    display:none; 
    height:auto; 
} 
nav ul li { 
    display:block; 
    margin:0.2em 0em 0.2em 0em; 
} 
} 

@media screen and (max-width:550px) { 
div#header { 
height: 2em !important; 
} 

@media screen and (max-width:550px) { 
div#content { 
top: 2em !important; 
} 

Answer 1

私のテクニックは、すべてのmediaquery後、私は重い色に一つの要素をcoloriseされているので、時に起こっていただきました！私は見ることができます。私にとって

@media screen and (max-width: 320px) { 
 
    header { background-color: red; } 
 
}

- 320PX =赤、480PX =オレンジ、760px =緑

挨拶; sの