PhoneGap - target-densitydpi on viewport

3
votes

I'm creating a app for Android and iOS using PhoneGap.

After creating the "HelloWorld" app from PhoneGap's template I could see the target-densitydpi=device-dpi on the viewport by default. Okay, that's fine for now but I decided to run some tests with JQuery Mobile UI and they do not use target-densitydpi on the viewport (by the way if I do, the website should look very small on high dpi devices).

Since I need the images of my app to look great at low and high resolution devices, I decided to run some tests on my Galaxy S4.

First, target-densitydpi=device-dpi removed:

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

The document.width was 360px, so I created a 360px image and it was really blurry at my GS4 screen.

<img src="360img.jpg" style="width:360px;">

Second, target-densitydpi=device-dpi enabled:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

The document.width was 1080px, so I created a 1080px image and it was great at my GS4 screen.

<img src="1080img.jpg" style="width:1080px;">

Third, target-densitydpi=device-dpi removed with 1080px image:

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

The document.width was 360px, so I used the previously created 1080px image and it looks great at the GS4 screen.

<img src="1080img.jpg" style="width:100%;">

image tests

I was able to get the same results on second and third tests, but, wich one is the best (or correct) way to work with PhoneGap Apps?

Thanks!

EDIT1:

I'm thinking about provide these images via API, where I can tell the size of the window to return the correct sized image.

window.width was 1080px at all tests, so return the correct sized image will not be a problem.

For icons, I'm considering SVG, then I don't need to create sprites for each resolution. I can resize de image via CSS or JavaScript and it should still looking good.

What made me think to don't use target-densitydpi=device-dpi was JQuery Mobile UI, they library is responsive and they don't use it, why?

1
androidjqueryioscordova
it would be better if you use device-dpi on because for third case you needed less number of pixels but you used image with more size than necessary, that ultimately increases size of app which is not a desired feature. – Greenhorn
wrong wrong wrong. In the third case, the mobile browser is converting all css pixels by a factor of 3. The resolution of the phone is still 1080 pixels wide, but 1080 / 3 is 360. There are no wasted pixels as far as the image is concerned. A pixel is not a pixel anymore in the mobile world. quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – Noishe

1 Answers

2
votes

target-densitydpi is not supported IOS and deprecated Android. So I suggest do not use it.