title: Achieving min-width with viewport meta tag
body: <p>I would like my webpage's <em>viewport width</em> to equal <em>device-width</em> as long as <em>device-width</em> > 450px, or 450px otherwise (my layout dynamically scales, but doesn't look good below 450px wide).</p>
  
  <p>The following two meta tags work well on tablets, where the device-width > 450px:</p>
  
  <pre><code>&lt;!-- uses device width --&gt;
  &lt;meta name="viewport" content="width=device-width" /&gt;
  
  &lt;!-- use of initial-scale means width param is treated as min-width --&gt;
  &lt;meta name="viewport" content="width=450, initial-scale=1.0" /&gt;
  </code></pre>
  
  <p>however, on phones (where e.g. device-width=320px) the former is too thin for the content; and the latter causes the browser to zoom in, so the user has to manually zoom out to see the content.</p>
  
  <p>Alternatively, this meta tag works well on phones</p>
  
  <pre><code>&lt;meta name="viewport" content="width=450" /&gt;
  </code></pre>
  
  <p>but doesn't take advantage of the extra width available on tablets.</p>
  
  <p>Any help/ideas would be really appreciated (and if it makes a difference, I'm using GWT).</p>