[kilohertz_.]

Пытаюсь сделать сайт с адаптивной версткой, код делал по уроку с хабра. Если на компьютере уменьшать окно браузера - все работает на ура, но на смартфоне отображается как полная версия. В чем дело?

<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
#pagewrap {
   width: 980px;
   margin: 0 auto;
   background: red;
}
#header {
   height: 160px;
   background: yellow;
}
#content {
   width: 600px;
   float: left;
   background: green;
}
#sidebar {
   width: 280px;
   float: right;
   background: black;
}
#footer {
   clear: both;
   background: blue;
}
</style>
<link href="media-queries.css" rel="stylesheet" type="text/css">
<div id="pagewrap">
   <header id="header">
      <hgroup>
         <h1 id="site-logo">Demo</h1>
         <h2 id="site-description">Site Description</h2>
      </hgroup>
      <nav>
         <ul id="main-nav">
            <li><a href="#">Home</a></li>
         </ul>
      </nav>
      <form id="searchform">
         <input type="search">
      </form>
   </header>
   <div id="content">
      <article class="post">
         blog post
      </article>
   </div>
   <aside id="sidebar">
      <section class="widget">
          widget
      </section>              
   </aside>
   <footer id="footer">
      footer
   </footer>
</div>

@media screen and (max-width: 980px) {
   #pagewrap {
      width: 95%;
   }
   #content {
      width: 60%;
      padding: 3% 4%;
   }
   #sidebar {
      width: 30%;
   }
   #sidebar .widget {
      padding: 8% 7%;
      margin-bottom: 10px;
   }
}
@media screen and (max-width: 650px) {
   #header {
      height: auto;
   }
   #searchform {
      position: absolute;
      top: 5px;
      right: 0;
   }
   #main-nav {
      position: static;
   }
   #site-logo {
      margin: 15px 100px 5px 0;
      position: static;
   }
   #site-description {
      margin: 0 0 15px;
      position: static;
   }
   #content {
      width: auto;
      float: none;
      margin: 20px 0;
   }
   #sidebar {
      width: 100%;
      float: none;
      margin: 0;
   }
}
@media screen and (max-width: 480px) {
   html {
      -webkit-text-size-adjust: none;
   }
   #main-nav a {
      font-size: 90%;
      padding: 10px 8px;
   }
}