Can't make the viewport meta tag work

1
votes



I'm currently developing a website that is designed to display best on iPad, but must display nicely on most mobile browsers.

I based the css on a width of 2048px, which is the pixel width of the iPad 3 when in landscape mode.

I then used the viewport meta tag as written below : 

<meta name="viewport" content="width=2048" />

Having read the Apple documentation and the Android one regarding this topic, I was made to understand that a mobile browser first renders the webpage in a larger area defined by the viewport meta tag, then scales it down to match the device width.

This works very well on an iPad 2, but the width overflows on an iPhone, an iPhone Retina and a Galaxy Nexus. I didn't have the opportunity to test the website on an iPad 3.

How can this behaviour be explained?

If any detail were to be added on this issue, please let me know.
Thanks in advance for your help.

1
androidmobile-safarimeta-tagsviewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Have you tried this? - SKT
Yes doesn't fit my needs, because my page is 2048px wide, so this meta makes the page be far too large for any screen. - arnaud

1 Answers

1
votes

Read through http://developer.android.com/guide/webapps/targeting.html#ViewportScale The trick is figuring out the balance between the device width and your viewport scale.

Specifically:

The default initial scale is calculated to fit the web page in the viewport size. Because the default viewport width is 800 pixels, if the device screen resolution is less than 800 pixels wide, the initial scale is something less than 1.0, by default, in order to fit the 800-pixel-wide page on the screen.

If you set your initial scale to 2, the page will be zoomed in. If you set it to .5, you will be zoomed out. Min and max can also overwrite these attributes