I am trying to understand the viewport meta tag for ios devices. I created a test page, where I inserted an image that is 862px wide. so i have the viewport meta tag as:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
Yet on the ipad 3, with a resolution width of 1536 pixels, and having the viewport set to the same amount of visible area of the ipad 3, the 862px image is blown up, and is a little larger in width than the visible area. so i have to scroll horizontally to see the rest of the image.
This makes me think that device-width is returning 768 pixels, and that accounts for the little bit extra of horizontal scroll for the 862 pixel image. Why is it doing this? Is there some kind of pixel density I have to account for?
UPDATE
I've tried setting the width to a numerical width, the same exact width of the image (in this case "862"). So the webpage is 862X206, the same as the image, yet it is doing the same exact thing as setting the width to device-width.
UPDATE 2
I created a very simple page, and for some reason a blank page with a viewport of 862 pixels causes horizontal and vertical scrolling on my ipad 3, the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=862, initial-scale=1.0">
</head>
<body style="width:100%; padding:0; margin:0">
</body>
</html>
This scrolling is causing the viewport not to fit inside the viewable area or screen size. I dont understand. Any insight would be greatly appreciated. Thank you. ** Note ** I forgot to add a reset of the padding and margin to 0, it was adding 8 px of margin.
UPDATE 3
Ok, originally, I thought that the device-width would return the resolution width of 1536 pixels of the ipad 3. Apparently, it returns the screen size of 768 pixels.
Any viewport width greater than 768, gives me scrolling on the ipad 3. why? what if you had a page that was 1024 pixels, and you want to fit that into the visible area of the ipad 3. you set the width to 1024, the initial-scale to 1, shouldn't that make the 1024px viewport fit into the viewable area?
SOLUTION
Ok, so, if you want to have each device figure out how to scale your page, all you do is leave out the initial-scale.
So if I set just the width, using either device-width or a numerical value, and leave out the initial-scale, it automatically calculates the zoom for you. and it just works.
my confusion lied in what the width meant, width means the width before the scale is applied, so if i say:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
the width of the viewport before the scale is, 768, and if the webpage body is say 862px, and after the scale factor of 1.0 is applied, the content is multiplied by 1.0, 862*1.0, so the width of the viewport is now the width of the content scaled at that scale factor, 862px. i hope i understand this right. thats where my confusion was, was what width meant.
The iPad 3 is 768px wide, where each px represents 2 physical pixels. You can account for it in Javascript but not in your viewport as far as I know (and you probably don't want to, since those 768 px are the same physical size as the ones on earlier iPads).