CODEWITHSUNDEEP
androidimagecordova
Marcelo Assis
Marcelo Assis

Reputation: 5194

Images are rendering in a different ratio than it should - Phonegap in Android

I'm developing an Android App using PhoneGap, but I found a problem very soon. Whenever I insert a image (background or image tag), it shows bigger than it should be.

I initially thought this was my emulator issue, presenting my app in a different ratio, but it wasn't! I took a screenshot, and the width of my viewport is 540, just like I defined in the AVD.

As you can see in the screenshot below, in my HTML I did set a image tag, forcing width to 69, and height to 70 (the real dimensions of my source image). But it always renders bigger!

The label "original source image" points to the real image I dragged from it's directory to the screenshot, just to prove they're very different.

Screenshot of the problem

Upvotes: 3

Views: 436

Answers (1)

Joelmob
Joelmob

Reputation: 1106

In an android project there are different folders where you put drawables (images). These are called xdpi hdpi mdpi ldpi. I dont know how PhoneGap works but you should be able to tell phonegap in which folder to put the image. Here is someone who specified device dpi in a meta tag, maybe you can try this: http://wiki.phonegap.com/w/page/32771298/Android%20High%20Pixel%20Density%20App

Metatag

<meta name="viewport" content="width=device-width; target-densityDpi=device-dpi; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=0" />

Upvotes: 2

Related Questions