Sencha Touch 2B3 Not adding viewport meta tag?

[sencha@pelaxa.com]

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:

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');
    }
});

[mitchellsimoens]

What meta tag that was added in ST1 is not added in ST2?

[sencha@pelaxa.com]

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.

[cbarrese]

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?

[korey_sed]

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).

[cbarrese]

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.

[cbarrese]

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/