CODEWITHSUNDEEP
iphoneioscordovamobile
gokujou
gokujou

Reputation: 1491

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.

Upvotes: 7

Views: 10578

Answers (3)

GraceGuy
GraceGuy

Reputation: 1

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

Upvotes: -2

user3110285
user3110285

Reputation: 11

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

Upvotes: 1

gokujou
gokujou

Reputation: 1491

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.

Upvotes: 21

Related Questions