1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    2
    Vote Rating
    0
    devyn is on a distinguished road

      0  

    Default Answered: Why images are 1/3 larger than normal size?

    Answered: Why images are 1/3 larger than normal size?


    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!

  2. It's all because of viewport. I force it to display native dpi and now I can use full size images.

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This would be the browser handling. You can try and use the background-image-size CSS rule.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    2
    Vote Rating
    0
    devyn is on a distinguished road

      0  

    Default


    Hi, thanks for your reply. I'm away from the code for now but I think I tried with background-image-size already and if I manually resize to 320px (originally 480px), it fits perfectly. However, the problem is, all images (such as icons and custom background for buttons) they all get bigger in 1/3 ratio and I don't really think I should reduce their size by hard coding to good look in actual device.
    So there must be away isn't it?

    Do you think it may be because of "viewport" or something but I'm not sure and couldn't find exact answer yet.

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    2
    Vote Rating
    0
    devyn is on a distinguished road

      0  

    Default


    It's all because of viewport. I force it to display native dpi and now I can use full size images.

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

Thread Participants: 1