PhoneGap: Scaling down a webpage with viewport

Question

I am creating a quick prototype of an App we are going to be building at work so we can do a quick user test on some functionality.

My designer created my images at a 640px width to match the resolution of the iPhone 5. So to make things simple and quick I used this viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">

This work perfectly in mobile Safari but now that I have wrapped it in PhoneGap it is behaving like the scale is set to 1. Any thoughts on what I need to do to fix this?

Thank you.

Answer 1

I found it. There is a 'config.xml' in the root of the project. Setting this line:

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

To be 'true' like my snippet here shows, made the app scale correctly like it did online.

Answer 2

just tested, preference is not complete solutioin, do following:

config.xml: preference name="EnableViewportScale" value="true" />

main activity, enable viewport in settings AFTER loadurl:

    super.loadUrl(Config.getStartUrl(),1);   
    WebSettings settings = appView.getSettings(); 
    settings.setUseWideViewPort(true); 
    settings.setLoadWithOverviewMode(true);