Geek asks and answers

Rendering images in a different ratio than necessary - Phonegap on Android

I am developing an Android application using PhoneGap, but I soon found a problem. Whenever I insert an image (background image or image tag), it is displayed more than it should be.

Initially, I thought it was a problem of my emulator, representing my application in a different ratio, but it is not! I took a screenshot and the width of my viewport is 540, just like I defined in AVD.

As you can see in the screenshot below, in my HTML I set the image tag, typing a width of up to 69 and a height of up to 70 (the actual dimensions of the original image). But he always gets bigger!

The label "original source image" indicates a real image that I dragged from its catalog to a screenshot to prove that they are completely different.

Screenshot of the problem

+3
source share
1 answer

There are different folders in the Android project where you put drawables (images). They are called xdpi hdpi mdpi ldpi. I do not know how PhoneGap works, but you must tell the phone the difference in which folder to put the image. Here is someone who indicated the device label in the meta tag, maybe you can try the following: http://wiki.phonegap.com/w/page/32771298/Android%20High%20Pixel%20Density%20App

meta tag

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

More articles:


All Articles