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
    35,677
    Vote Rating
    749
    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?


film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar