Question

I’m developing a Android App with SenchaTouch2. I used a 480px wide png file as background image to fit in GalaxySII which has 480px width. It’s perfectly fine in browser but after I exported as native app, that background gets bigger and out of the viewable range.

After some observation, if I want to fit in 480px screen, your original image should be 320px which is 1/3 difference.
Please let me know who can I manage to display background with original width n height.

Thanks!

Answer 1

It sounds like your WebView is performing scaling. That is, the default scale of 1.0 is equal to an mdpi device. Galaxy SII is an hdpi device, which would be scale 1.5. So your 480px image is becoming 480px * 1.5 or 720px and why a 320px would look like what you want.

Try specifying that the viewport uses the native DPI of the device like so:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"/>

Alternatively, you could specify it as:

<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0"/>

You can read more about setting the viewport to target Android devices at: http://developer.android.com/guide/webapps/targeting.html

Note that if you run into subsequent font issues, you’ll need to follow the steps in my answer to font size different on ios and android

Also note that for Sencha Touch 2, it looks like they turned off this automatic viewport setting: http://www.sencha.com/forum/showthread.php?184219-Viewport-Meta-Tags-not-injected-automatically