スマートフォンに対応していないナビゲーションバー

Question

すべての画面サイズに対応したウェブサイトを作成したいと考えています。

Chromeエミュレータを使用すると問題なく動作します。
スマートフォンからウェブサイトを呼び出すと、サイズ変更されたナビゲーションバーの代わりに完全なナビゲーションバーが表示されます。

JSFiddle：https://jsfiddle.net/Simagdo/2b9f6nh1/

HTML

<nav> 
    <div id="logo">Fluidtechnik Fiedler</div> 
    <label for="drop" class="toggle">Menu</label> 
    <input type="checkbox" id="drop"/> 
    <ul class="menu"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <!-- First Tier Drop Down --> 
      <label for="drop-1" class="toggle">Service +</label> 
      <a href="#">Service</a> 
      <input type="checkbox" id="drop-1"/> 
      <ul> 
       <li><a href="#">Service 1</a></li> 
       <li><a href="#">Service 2</a></li> 
       <li><a href="#">Service 3</a></li> 
      </ul> 
     </li> 
     <li> 

      <!-- First Tier Drop Down --> 
      <label for="drop-2" class="toggle">Portfolio +</label> 
      <a href="#">Portfolio</a> 
      <input type="checkbox" id="drop-2"/> 
      <ul> 
       <li><a href="#">Portfolio 1</a></li> 
       <li><a href="#">Portfolio 2</a></li> 
       <li> 

        <!-- Second Tier Drop Down --> 
        <label for="drop-3" class="toggle">Works +</label> 
        <a href="#">Works</a> 
        <input type="checkbox" id="drop-3"/> 
        <ul> 
         <li><a href="#">HTML/CSS</a></li> 
         <li><a href="#">jQuery</a></li> 
         <li><a href="#">Python</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Submit</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
</nav> 

CSS：

@import url(http://fonts.googleapis.com/css?family=roboto); 

h1 { 
    font-size: 60px; 
    text-align: center; 
    color: #FFF; 
} 

h3 { 
    font-size: 30px; 
    line-height: 34px; 
    text-align: center; 
    color: #FFF; 
} 

h3 a { 
    color: #FFF; 
} 

a { 
    color: #FFF; 
} 

h1 { 
    margin-top: 100px; 
    text-align: center; 
    font-size: 60px; 
    line-height: 70px; 
    font-family: 'roboto', sans-serif; 
} 

#container { 
    margin: 0 auto; 
    max-width: 890px; 
} 

p { 
    text-align: center; 
} 

.toggle, [id^=drop] { 
    display: none; 
} 

nav { 
    margin: 0; 
    padding: 0; 
    background-color: #254441; 
    height: 150px; 
} 

#logo { 
    display: block; 
    padding: 0 30px; 
    float: left; 
    font-size: 20px; 
    line-height: 60px; 
} 

nav:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

nav ul { 
    float: right; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    position: relative; 
} 

nav ul li { 
    margin: 0px; 
    display: inline-block; 
    float: left; 
    background-color: #254441; 
    text-decoration: none; 
} 

nav a { 
    display: block; 
    padding: 0 20px; 
    color: #FFF; 
    font-size: 20px; 
    line-height: 60px; 
    text-decoration: none; 
} 

nav ul li ul li:hover { 
    background: #000000; 
} 

nav a:hover { 
    background-color: #000000; 
} 

nav ul ul { 
    display: none; 
    position: absolute; 
    top: 60px; 
} 

nav ul li:hover > ul { 
    display: inherit; 
} 

nav ul ul li { 
    width: 170px; 
    float: none; 
    display: list-item; 
    position: relative; 
} 

nav ul ul ul li { 
    position: relative; 
    top: -60px; 
    left: 170px; 
} 

li > a:after { 
    content: ' +'; 
} 

li > a:only-child:after { 
    content: ''; 
} 

/* Media Queries 
--------------------------------------------- */ 

@media all and (max-width: 768px) { 

    #logo { 
     display: block; 
     padding: 0; 
     width: 100%; 
     text-align: center; 
     float: none; 
    } 

    nav { 
     margin: 0; 
    } 

    .toggle + a, 
    .menu { 
     display: none; 
    } 

    .toggle { 
     display: block; 
     background-color: #254441; 
     padding: 0 20px; 
     color: #FFF; 
     font-size: 20px; 
     line-height: 60px; 
     text-decoration: none; 
     border: none; 
    } 

    .toggle:hover { 
     background-color: #000000; 
    } 

    [id^=drop]:checked + ul { 
     display: block; 
    } 

    nav ul li { 
     display: block; 
     width: 100%; 
    } 

    nav ul ul .toggle, 
    nav ul ul a { 
     padding: 0 40px; 
    } 

    nav ul ul ul a { 
     padding: 0 80px; 
    } 

    nav a:hover, 
    nav ul ul ul a { 
     background-color: #000000; 
    } 

    nav ul li ul li .toggle, 
    nav ul ul a { 
     background-color: #212121; 
    } 

    nav ul ul { 
     float: none; 
     position: static; 
     color: #ffffff; 
    } 

    nav ul ul li:hover > ul, 
    nav ul li:hover > ul { 
     display: none; 
    } 

    nav ul ul li { 
     display: block; 
     width: 100%; 
    } 

    nav ul ul ul li { 
     position: static; 

    } 
} 

@media all and (max-width: 330px) { 

    nav ul li { 
     display: block; 
     width: 94%; 
    } 

} 

Answer 1

あなたはすべてのCSSに

このメイトタグやメディアを追加する必要があります