Making Sense of Android Meta-Viewport Scaling: What Am I Missing

HTML5 Viewport meta tag not working on android phone in portrait mode

Try using maximum-scale instead of initial-scale. The maximum scale keeps the scale settings when the user switches from portrait to landscape view.

Like below:

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

Or, you may also specify width:

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

I guess the below works for iPhone and iPad both

 <meta name="viewport" content="width=720, maximum-scale=1.0" />

or last try

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

Besides there are CSS3 media queries too.

issue with viewport meta tag

You should use the same tag for Android, but there are a few differences how different platforms calculate initial scale from viewport size, or viewport size if not set. Also keep in mind that initial-scale only works first time you load the page, if you reload the page it will keep the scaling that you currently have.

I'm unsure what result you are looking for, but you have a great reference for Android here ( http://developer.android.com/guide/webapps/targeting.html ) and for Iphone here ( http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/
usingtheviewport/usingtheviewport.html ).

Also, you can google for "tale of two viewports" (i was unable to post link because of low reputation)

Android ignores maximum-scale when using fixed-width viewport meta-tag

After more banging my head against a table, I have found a solution:

Unfortunately it seems that iOS and Android simply behave differently (Android is very clearly not doing what the spec says by ignoring maximum-scale). The solution is to specialize based on resolution using JavaScript:

• If the screen width (see note below) is greater than or equal to the fixed page width (640 in my example), then set the viewport meta-tag's content width to the screen width

• Else set the viewport meta-tag's content width to fixed page width (640)

Presto. Lame that it requires JavaScript specialization, but such is life.

Note that the Javascript screen.width on iPad/iPhone is incorrect if the device is landscape mode (the iPad still reports the portrait width instead of the landscape width, unlike Android which gets it right in this case!). Therefore, you'll need to check window.orientation on iPad/iPhone and use screen.height instead of screen.width if you are in landscape.

---

Related Topics