title: Confused on "initial-scale=1.0" - iphone 3GS vs 4
body: <p>I'm having some problems getting my website to scale correctly for mobile devices.</p>
  
  <p>We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently: </p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" /&gt;
  </code></pre>
  
  <p>Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".</p>
  
  <p>Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?</p>
  
  <p>So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc. </p>
  
  <p>Getting quite frusterated :( Feel like i'm missing something important that I should already know. </p>
  
  <p><strong>Edit</strong> It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.</p>
  
  <p>The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???</p>