Currently through the builder you guys are setting the viewport metatag to this;
meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
However you really should do this:
meta name=viewport content="width=device-width, initial-scale=1"
Because once you guys set user-scalable or maximum scale it's difficult to programatically change this on the load event... My suggestion is for you guys to modify the viewport setting to this so that we can apply view port modifications without having to edit the source directly.
if ($(window).width()300){
Code: Select all
$('head meta[name=viewport]').remove();
$('', {
name: 'viewport',
content: 'initial-scale=2, width=device-width'
}).appendTo('head'); };
Unless there's another solution here, I will have to modify all the source pages to get this to work correctly. My curent solution which requires editing the source is removing the viewport tag manually from the source and adding it back to:
Code: Select all
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
else if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
{
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
}
$('', {
name: 'viewport',
content: 'initial-scale=2 width=device-width'
}).appendTo('head');
});