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.

回答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.

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

回答3:

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".

来源：https://stackoverflow.com/questions/15579078/phonegap-scaling-down-a-webpage-with-viewport

标签

iphone

ios

cordova

mobile