Results 1 to 7 of 7

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

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    What meta tag that was added in ST1 is not added in ST2?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
      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
      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
      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
      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
      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/

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •