title: How to make the body width equal to the device-width automatically in CSS3 media query?
body: <p>I'm doing a mobile website now and trying to target different devices using CSS3 media queries. Part of my code is as follows:</p>
  
  <pre><code>@media screen and (max-width:320px) {
  body {
      width: 320px;
  }
  /* some other style */  
  }
  </code></pre>
  
  <p>As you can see, I have to set the body width explicitly to make sure it doesn't show the width I set for desktop in my normal css, which is 920px. I'm wondering if there is any way that the body width can be set automatically to the device width and I don't need to  set this manually every time I create a new <code>@media</code>.</p>
  
  <p>By the way, I also add the following code inside my <code>head</code> tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
  </code></pre>