1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    175
    Vote Rating
    9
    huberte will become famous soon enough

      0  

    Default Unanswered: Strange behaviour with image on Android

    Unanswered: Strange behaviour with image on Android


    Hi,

    I'm working on an educational project where teachers could plublish various documents. Thing is, those documents are often full of formulas. I need png file or better : svg (wich are not correctly displayed on various devices)

    Try : http://www.sciences-physiques.eu/appli/carimage/

    I use minimum 1536*xxx images for an optimal display on various phones.

    On iOS, the only limits is the number of pixel : 3*1024*1024 : I did cut my images in several peaces. Images are well displayed

    On Android, the stock browser shows awful images. Better on chrome, but not so good (and I know Android has good results when scaling images. I did go native with imageview on eclipse and the result was fine).
    Why ? Look at those 2 screens : http://tof.canardpc.com/show/9144d04...91112f9fc.html and http://tof.canardpc.com/show/36008198-e6ef-4b02-820b-fe2ca8b8df1c.html

    Thing is, I need to go on webapp for this project. (I tried to build an apk : awful images too !)

    Do not hesitate to blame me if I did something wrong. What should I do to have a better rendering ?

    My code is very easy. I added img { width: 100%;} in index.html (it's worse with max-width)

    Main.js is

    Code:
    Ext.define('resimage.view.Main', {    extend: 'Ext.navigation.View',
        xtype: 'main',
        
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
            {
                xtype: 'tabpanel',
                   tabBar: {
                        docked: 'bottom',
                        ui: 'light'
                    },
                items: [
                        {
                            
                            title: 'Image',
                            iconCls: 'home',
                            html: '<div><img src=./resources/images/1.png /><img src=./resources/images/2.png /></div>',
                            scrollable: 'vertical'
                        },
    
    
                        {                       
                            title: 'Carimage',
                            iconCls: 'more',   
                             layout: {
                                        type: 'card'
                                    },  
    
    
                            items: [
                            {
                                xtype:'carousel',
                                
                       
    
    
                                
                                items: [
                                    {xtype: 'container', 
                                        scrollable : {
                                            direction     : 'vertical',
                                            directionLock : true
                                        },
                                        items:[
                                            { xtype: 'image',  
                                            html: '<img src=./resources/images/1.png />'}
                                        ]                            
                                    },
                                    {xtype: 'container', 
                                        scrollable : {
                                            direction     : 'vertical',
                                            directionLock : true
                                        },
                                        items:[
                                            { xtype: 'image',  
                                            html: '<img src=./resources/images/2.png />'}
                                        ]                            
                                    },
                                    {xtype: 'container', 
                                    layout: {
                                        type: 'vbox'
                                    },  
                                        scrollable : {
                                            direction     : 'vertical',
                                            directionLock : true
                                        },
                                        items:[
                                            { xtype: 'image',  
                                            html: '<div><img src=./resources/images/1.png /><img src=./resources/images/2.png /></div>'}
                                        ]                            
                                    }                            
                                    
                                ]
                            }
                            ]
                        }
    
    
    
    
    
    
                ]
            }
            ]
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    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


    for mobile devices, you should be using small images, if an image is a few hundred KB you may want to look at optimizing the image as perf will suffer.
    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.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    175
    Vote Rating
    9
    huberte will become famous soon enough

      0  

    Default


    mitchellsimoens , please look at http://www.sciences-physiques.eu/appli/oneimage/

    I
    t's one and only one image, size ie only 102 Ko, looking awful on Android, not on iOS

    In my previous example (carimage), you had 3 images in a carousel (220 Ko, 78 Ko, 398 Ko). Each of them are looking awful ! So even with small images, I have a very bad result on Android

    EDIT : switched to svg

Thread Participants: 1

Tags for this Thread