PhoneGap: Scaling down a webpage with viewport

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.

Answers


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.


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); 

I see above a possible mistake. Maybe my betters can comment.

1) The initial questioner seems to want to scale. The end of the line states "user-scalable=no". This could result in no scaling - scaling 100%. Browsers let you scale no matter what, right? So Safari result was a red herring. Also, the inital and maximum scale are the same.

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

2) According to Sebastions reply, perhaps the correct value is "50" not "0.5".


Need Your Help

The specified child already has a parent. You must call removeView() on the child's parent first (Android)

java android android-edittext textview parent-child

In my app, I have to switch between two layouts frequently. The error is happening in the layout posted below.

Loop through checkboxes and count each one checked or unchecked

jquery checkbox

I've run into a bit of an issue. Here's a brief explanation.