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
    36,791
    Answers
    3465
    Vote Rating
    833
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi