1. 16 Mar 2012 1:23 AM #1
    devyn
    devyn is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    Answers
    2
    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!
    Reply With Quote Reply With Quote
  2. Best Answer Posted by devyn

    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. 16 Mar 2012 5:59 AM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,714
    Vote Rating
    438
    Answers
    3113
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      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
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    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 almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  4. 16 Mar 2012 10:07 PM #3
    devyn
    devyn is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    Answers
    2
    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.
    Reply With Quote Reply With Quote
  5. 26 Mar 2012 1:00 AM #4
    devyn
    devyn is offline
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    Answers
    2
    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" />
    Reply With Quote Reply With Quote