How to enable user-scalable (viewport property) after disabling it?

Question

I created an Android app with Phonegap. I want to be able to have a fixed div in one page and to zoom-in in another page.

I use jquery mobile 1.2.0, Jquery 1.8.2, Pho

Answer 1

Quick Answer

Don't disable user-scalable but instead modify maximum-scale

Long Answer

I know this was a while back, but if anyone else stumbles on this problem this is the solution. OP I hope you see this.

If you initially set user-scalable=no then regardless if you change the attribute back to user-scalable=yes via javascript, the Android browser will ignore it (not sure about Firefox, etc.)

Instead, you should put the initial, minimum, and maximum scales to 1.0 with user-scaleable at 1 and then when you modify the meta tag, you only change maximum scale to 2.0. See below for clarification.

Initial State

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

Initial State

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=2.0, maximum-scale=1.0, user-scalable=1">

Conclusion

Now, you can alter zoom capability by playing with maximum-scale while always keeping user-scalable true. Note, that for some reason Firefox ignores this workaround and will allow the user to zoom regardless. That sucks considering Firefox on Android has over 10 million downloads.