title: Setting min-width of screen within media query, vs Viewport tag
body: <p>What's the best way of simply 'shrinking' a site to fit on to an iPad, while making it fully responsive when it comes to mobiles?</p>
  
  <p>Here's my viewport tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
  </code></pre>
  
  <p>I had hoped that the following media query would enable the whole 1060px wrapper div to be displayed by forcing the device to 'zoom out' thus displaying all, like a mini version of the desktop display</p>
  
  <pre><code>#wrapper {
      background: green;
      margin: 0 auto;
      width: 1060px;
  }
  
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  
          body { min-width: 1080px; }
  
          wrapper { background: red; }
  
      }
  </code></pre>
  
  <p>The media query itself works (wrapper background turns red on iPad), but I still need to zoom out to view the whole page.</p>
  
  <p>However, if I change to my viewport tag to:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=1080px"&gt;
  </code></pre>
  
  <p>I get the desired result, but this is no good since the mobile version needs to be fully responsive. So am hoping there's something I can add to the media query to achieve it.</p>
  
  <p>Sure I'm missing something very obvious here - and seem to remember this technique working in the past - any help appreciated!</p>
  
  <p>Many thanks in advance!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>It seems this has been raised before, same issue, and yet no solution:</p>
  
  <p><a href="https://stackoverflow.com/questions/11939671/how-can-i-use-meta-viewport-and-css-media-queries-to-make-the-average-960px-webs">How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?</a></p>