Phonegap iFrame/page scaling

Question

I have a page that uses the following code when dealing with mobile devices

<meta name="viewport" content="width=device-width, initial-scale=.7, maximum-scale=2, user-scalable=1">

This code works great when viewed in a web browser on a mobile device. Now I am trying to create a Phonegap application with this very same page in an iframe in the application. However, the scaling/viewport is not working at all. Regardless of the numbers I put in for the scaling, the scale is still the same. It will not change.

The reason I am trying to do this is that my Phonegap application is tying together two external pages on the same Phonegap page via two iframes and I need both pages to be able to be viewed at one time without running out side the screen.

Anyone have any ideas as to how I can use/enable scaling using iframes in Phonegap? Thanks.

Answer 1

Finally found the answer. Someone posted it on the Phonegap Google group. Here's their response:

Try setting the "EnableViewPortScale" setting to true: http://docs.phonegap.com/en/2.4.0/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS

So I added the following to my config.xml file and it's now scaling like I want it to. Only caveat is that you have to go lower than normal on the viewport with Phonegap to achieve the same effect.

<preference name="EnableViewportScale" value="true" />