title: How can I force zoom-out or min-width on mobile?
body: <p>I have a largely responsive site, built on Bootstrap 2.3. But one page I need to be zoomed out to fit items that don't work responsively. If I double tap, it zooms out perfectly. But I want to default this way.</p>
  
  <p><img src="https://i.stack.imgur.com/dv6QA.jpg" alt="skitch"></p>
  
  <p>html:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container-fluid" style="min-width:1024px"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;!-- arbitrary content. point is: zoom out by default, don't crop img --&gt;
              &lt;img src="1024x768.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;!--
                   if min-width is observed, these should be side by side
                   instead of wrapped like responsive normally does
              --&gt;
              &lt;img src="300x768.png"&gt;&lt;img src="300x768.png"&gt;&lt;img src="300x768.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Note: I'm not trying to disable zoom. I just want to default zoomed out.</p>
  
  <p>I've tried the following without success:</p>
  
  <pre><code>1. &lt;meta name="viewport" content="width=1024"&gt;
  
  2. &lt;meta name="viewport" content="user-scalable=yes"&gt;
  
  3. body { float:left; min-width:1024px; }
  
  4. min-width on all wrapped objects
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Ugh. I was using Google Chrome mobile emulation to debug. Actual mobile device worked fine with html,body {min-width:1024px;}. I threw in  as well to de-responsify some of the content.</p>
  
  <p>Pro-tip: Don't rely on Google Chrome mobile emulation.</p>