1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    sencha@pelaxa.com is on a distinguished road

      0  

    Default Unanswered: Sencha Touch 2B3 Not adding viewport meta tag?

    Unanswered: Sencha Touch 2B3 Not adding viewport meta tag?


    I have been working on porting my 1.1.1 app to 2.0b3. Managed to get most of it working, but it looks like the framework is not adding the meta tag to the HTML page, so the page looks like it would in a normal browser and I can zoom in and out.

    Is there a trick to tell it to do this? Do I have to use profiles?

    Here is my application code:
    Code:
    Ext.application({
        name: "myApp",
    	icon: 'resources/images/appicon.png',
    	glossOnIcon: true,
    	
    
    	controllers: ['myApp.controllers.login'],
    	models: ['myApp.models.Credentials'],
    	views: ['myApp.views.Login'],
    	stores: ['myApp.stores.Credentials'],
    	    
        /**
         * This function is automatically called when the document has finished loading.
         */
        launch: function() {
    		myApp.app = this;
    		requires: 'Ext.DateExtras',
    		
    		Ext.create('myApp.views.Login');
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Answers
    3540
    Vote Rating
    847
    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 meta tag that was added in ST1 is not added in ST2?
    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
    Aug 2011
    Posts
    2
    Vote Rating
    0
    sencha@pelaxa.com is on a distinguished road

      0  

    Default


    Basically, for the page to size properly on a phone, you need to have this meta tag in your HTML:

    <meta name="viewport" content = "width = device-width, initial-scale = 1.0, target-densityDpi=device-dpi, user-scalable = no" />

    Now, I am not sure how this was handled in sencha 1, but my app now acts as a web page, not a mobile web app and I suspect that this is the missing link. I had to add this tag manually to my index.html file to get it to display properly on my phone.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    cbarrese is on a distinguished road

      0  

    Default


    Hi, I am facing the same problem with my app acting as a web page not a mobile web app. Did you ever find the resolution to this problem?

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    14
    Vote Rating
    0
    korey_sed is on a distinguished road

      0  

    Default


    Add the tag I mentioned above, without the target-density portion to the header portion of your index.html file. That is the only way it worked for me and I have not even checked to see if the icon is being set right or not using the application's icon property (i.e. that may also have to be added as a meta tag).

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    cbarrese is on a distinguished road

      0  

    Default


    Thanks for the quick response. That does correct some of the rendering, but on a tablet it causes some issues when changing orientation from portrait to landscape. If I load the web page initially in portrait it looks fine, if I load initially in landscape it looks fine as well, if I load initially in landscape then switch to portrait it also works fine, but if I load initially in portrait then switch to landscape it does not resize correctly. Tried playing with the width specified in the meta tag but couldn't get it to work correctly. This was all testing on an iPad (iOS5). Just posting to document what my results were, for someone else who might come back to read this thread.

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    cbarrese is on a distinguished road

      0  

    Default


    I fixed the issue I mentioned in the previous post. Just read a good blog post on the handling of the viewport tag on different devices. I had to add a maximum-scale=1.0 to prevent the landscape orientation from messing up.

    http://www.allenpike.com/2010/choosi...or-ipad-sites/

Thread Participants: 3

Tags for this Thread