CODEWITHSUNDEEP
iphoneioscordovaviewport
nate8684
nate8684

Reputation: 539

iPhone image sizing

I'm having trouble wrapping my head around sizing images and ui elements for my iphone app using phonegap (basically mobile website gone native app). Here are my PSD settings:

width: 640px
height: 960px
resolution: 326px

I'm creating two images, one at half resolution and the other at full. Then I'm using a plugin to recognize the retina display and replace all images with "*-2x". The trouble is that the images appear larger on my retina iphone and are blurry. I'm wondering if my viewport is messing things up as it zooms in on the screen to fit the app:

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

Upvotes: 1

Views: 737

Answers (1)

Jeshua Lacock
Jeshua Lacock

Reputation: 6668

I have never used PhoneGap, but to make HTML show images in Retina res what I do is link to a retina res image, say the image is 640x960 pixels, but in the HTML set the size properties to 320x480.

The reason for this, is iOS uses resolution independent "points" instead of "pixels" for layout.

Upvotes: 1

Related Questions