Confused on "initial-scale=1.0" - iphone 3GS vs 4 [duplicate]

Question

I'm having some problems getting my website to scale correctly for mobile devices.

We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

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".

Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?

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.

Getting quite frusterated :( Feel like i'm missing something important that I should already know.

Edit 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.

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???

Answer 1

I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.

The following works reliably for me:

<meta name="viewport" 
      content="width=device-width,initial-scale=1,maximum-scale=1" />

You'll also want to disable the body and document from scrolling horizontally:

body, html
{    
    overflow-x: hidden;        
}

Good link for more info on Mozilla Site:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Answer 2

"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.

"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.