1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    4
    Vote Rating
    0
    twinsen71 is on a distinguished road

      0  

    Default Android browser doubletap zooming.

    Android browser doubletap zooming.


    Hi.
    I'm developing a mobile web game with sencha touch 2.
    in that game, I'm using a 'canvas' element.

    but, whenever a 'doubletap' event fired on the 'canvas', the view was cracked.

    It happens only in android devices not in iPhones.
    I guess it may related to 'doubletap zooming' of android browser.

    How can I get Solutions about this.

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


    What do you mean "cracked"?
    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 - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    We're aware of this issue, and if we can fix it, we will.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    4
    Vote Rating
    0
    twinsen71 is on a distinguished road

      0  

    Default I have tested this.

    I have tested this.


    REQUIRED INFORMATION


    Ext version tested:
    • Sencha Touch 2 PR2
    Browser versions tested against:
    • Mobile Safari 4 (Android 2.3.3, Galaxy TAB )
    DOCTYPE tested against:
    • ____
    Description:
    • when 'doubletab' event fired in Samsung Galaxy Tab device,
    • 'canvas' element of HTML5 seems to be broken.
    • in iPhone and some Android devides(Galaxy S, Galaxy nexus, Galaxy Note), no problems found.
    Steps to reproduce the problem:
    • open the test URL(http://www.twitplay.net/test.html).
    • move to 'canvas' tab.
    • 'doubletab' on the black area repetedly.
    • move to other tabs and return to 'canvas' tab.
    • 'doubletab' again and again.
    The result that was expected:
    • ordinary tab panel navigation with non broken view.
    The result that occurs instead:
    • sometimes, the view is cracked when 'doubletab' is fired.
    • the view is cracked by overlap with back panel.
    Test Case:

    Code:
    Ext.application({
    		name : 'RedBalloon',
    	
        viewport: {
            autoMaximize: false
        },
        
        launch : function() {    	
            Ext.create("Ext.TabPanel", {
                fullscreen: true,
                tabBarPosition: 'bottom',
    
                items: [
                    {
                        title: 'Home',
                        iconCls: 'home',
                        cls: 'home',
                        html: [
                            '<img width="30%" src="http://staging.sencha.com/img/sencha.png" />',
                            '<h1>Welcome to Sencha Touch</h1>',
                            "<p>You're creating the Getting Started app. This demonstrates how ",
                            "to use tabs, lists and forms to create a simple app</p>",
                            '<h2>Sencha Touch (2.0.0pr1)</h2>'
                        ].join("")
                    },
                    {
                        xtype: 'list',
                        title: 'List',
                        iconCls: 'star',
    
                        itemTpl: '{title}',
                        store: {
                            fields: ['title', 'url'],
                            data: [
                                {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},
                                {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},
                                {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},
                                {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}
                            ]
                        }
                    },
                    {
                        title: 'Canvas',
                        iconCls: 'info',
                        xtype : 'panel',
                        layout : 'hbox',
                        items : [{
                        		html : '<canvas id="TEST_CANVAS" width="320" height="280"></canvas>'
                    		},
                    		{
                    				xtype : 'panel',
                    				id : 'logger',
                    				scrollable : true,
                    				width : 320,
                    				height : 280,
                    				html : '<span>TEST CANVAS LOG</span>'
                    		}]
                    }                
                ]
            }).setActiveItem(0);
            
        		this.canvas = document.getElementById('TEST_CANVAS');
    				this.ctx = this.canvas.getContext("2d");
            
            this.pageX = 35;
            this.pageY = 80;
            
    				var eventDispatcher = this.getEventDispatcher();
    
    				eventDispatcher.addListener('element', '#TEST_CANVAS', '*', this.logging, this);   		     		   			                 
    				
    				var nTimer = setInterval(Ext.Function.bind(this.drawTest, this), 16);
        },
        
        logging : function(a, b, c, d) {
        		this.pageX = a.touch.point.x;
        		this.pageY = a.touch.point.y;
        			
            var logger = Ext.getCmp('logger'),
                scroller = logger.getScrollable().getScroller();
    
            logger.innerHtmlElement.createChild({
            		html : a.type + '[' + this.pageX + ', ' + this.pageY + ']' + ' : ' + d.info.eventName
            });
    
            scroller.scrollTo(0, scroller.getSize().y - scroller.getContainerSize().y);
    		},
    		
    		drawTest : function() {
    				this.ctx.strokeStyle = '#' + parseInt(Math.random() * 0x1000000);
    				this.ctx.fillStyle = '#000';
    				this.ctx.font = '30px sans-serif bold';
    				this.ctx.textBaseline = 'top';
    				
    				this.ctx.fillRect(0, 0, 320, 280);
    				this.ctx.fillStyle = '#FFF';
    				this.ctx.fillText('DoubleTab Here !!!', this.pageX, this.pageY);
    				this.ctx.strokeText('DoubleTab Here !!!', this.pageX, this.pageY);
    				
    		}
    });


    HELPFUL INFORMATION


    Screenshot or Video:
    See this URL for live test case: http://www.twitplay.net/test.html

  5. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Okay so I've figured out why this is the case.

    It happens because Ext.Viewport#preventZooming is now false by default in PR4. Setting this value to true means that double tap will not zoom, but it also means that any <a> link tags will not work, and there are a few issues with the Map component as well.

    You can turn this back on by using the viewport configuration of Ext.setup/Ext.application:

    Code:
    Ext.setup({
        viewport: {
            preventZooming: true
        },
        onReady: function() {
            //...
        }
    });
    Code:
    Ext.application({
        viewport: {
            preventZooming: true
        },
        launch: function() {
            //...
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    62
    Vote Rating
    5
    s.t.a.s is on a distinguished road

      0  

    Default


    Setting this value to
    true means that double tap will not zoom, but it also means that any <a> link tags will not work
    But how hyperlinks are related with zooming? For example, I want to use <a> but I don't need zooming on HTC by double tap. How to solve it?