3

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?

Wyller Gomes
  • 53
  • 1
  • 1
  • 7
  • 1
    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 Sep 03 '13 at 15:04
  • 1
    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. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – Noishe Jan 06 '14 at 03:03

1 Answers1

2

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

dongseok0
  • 737
  • 2
  • 7
  • 18
  • I just got a new android phone at the beginning of 2014 and target-densitydpi is still making a difference. – ChristopherStrydom Jul 31 '14 at 22:52
  • 1
    Which version? I believe webview from kitkat should not support target-densitydpi. ( https://developer.android.com/guide/webapps/migrating.html ) – dongseok0 Aug 06 '14 at 00:14
  • Oh sorry i am still on Jelly Bean. – ChristopherStrydom Aug 06 '14 at 16:19
  • Android 4.4 totally ignores that attribute. Anyway, forcing the use of the device's dpi creates more problems than it solves (your layout that looks good on 320x480 will be absurdly small on phones with +300 dpi) – andreszs Jan 08 '15 at 00:00