Phonegap not scaling properly between iPad and iPhone

问题

I developed an app for iPad using Phonegap 0.9.6. Seems to be working fine.

The main element in the app is 768 px wide, so scaling has not been a problem one way or the other.

Now I am experimenting with running the same thing on an iPhone.

I have this meta tag at the top of my html in the 'head' section:

<meta name="viewport" content="user-scalable=no, width=device-width">

It seems to work fine on the iPhone browser: I can point the browser to my locally-running server, the page gets scaled appropriately so it fits in the iPhone screen.

If I make a 'Home Screen" version of the page so it's more of a WebApp (still not using PhoneGap) I still get scaling, although now it's a little off: the image is a little too wide, a small strip on the right winds up offscreen.

But when I try things in Phonegap I am getting no scaling at all. The page always shows up at normal resolution, so I am seeing just the top quarter of it.

I have tried all of the following: * Changing Summary->Devices from iPad to Universal in XCode target settings. * Mucking with the 'enable display scaling' widget under the 'info' tab of the 'run' item on the scheme for this build. * Every permutation of trick I can think of for the meta 'viewport' tag: setting min/max scaling, setting initial scale, setting width to fixed numbers, etc.

For that last item, I can see tweaks I make reflected in the Browser on the iPhone (and the HomeScreen version), but the PhoneGap never budges: I always get the same upper-right corner. I can't seem to make that move at all.

回答1:

The appropriate way to fit iPhone screen is not to scale and shrink the whole page, but to use scalable html structure and styles for your app, for instance, use 100% instead of 768px. You should always avoid scaling the page. Insert this line to the head tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

It's better to write same css for both iPhone and iPad, but if you really want to apply different styles for them each, you can use media queries, for example, ipad-specific style is like this:

<link rel="stylesheet" media="screen (max-device-width: 1024px)" href="ipad.css" />

You will also want to assign different css files for low-resolution screen and retina screen. Still use media queries.

<link href="static/iphone.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="static/retina.css"
    media="screen and (-webkit-device-pixel-ratio: 2)" />