title: Viewport meta tags vs Media Queries?
body: <p>I would love to know, to optimize your website for Tablets, desktops and smarthpones, what is best to use: Media Queries or the Viewport meta tags? see code:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>vs</p>
  
  <pre><code>/* Smartphones (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
  /* Styles */
  }
  
  /* Smartphones (landscape) ----------- */
  @media only screen 
  and (min-width : 321px) {
  /* Styles */
  }
  
  /* Smartphones (portrait) ----------- */
  @media only screen 
  and (max-width : 320px) {
  /* Styles */
  }
  
  /* iPads (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
  /* Styles */
  }
  
  /* iPads (landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
  /* Styles */
  }
  
  /* iPads (portrait) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
  /* Styles */
  }
  
  /* Desktops and laptops ----------- */
  @media only screen 
  and (min-width : 1224px) {
  /* Styles */
  }
  
  /* Large screens ----------- */
  @media only screen 
  and (min-width : 1824px) {
  /* Styles */
  }
  
  /* iPhone 4 ----------- */
  @media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  }
  </code></pre>