Dynamically configure Viewport (ios/android) meta tag

In the head of your page include this:
//jquery


<meta name="HandheldFriendly" content="True" />
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />



$(function(){

var minSiteWidth = 480; /*Anything Less than or Equal to this will be in 'phone' view*/
var maxSiteWidth = 1024; /*Anything between this and min width will be tablet, anything greater will be Desktop*/



var previousOrientation = 0;
var checkOrientation = function(){
if(window.orientation !== previousOrientation && window.orentation != undefined){
  previousOrientation = window.orientation;
$(function(){
//get proper width
var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width;
//get proper width
var wh = ( $(window).height() < window.screen.height ) ? $(window).height() : window.screen.height;
var o = ( ww > wh) ? "Landscape" : "Portait";
$('body').removeClass('Landscape');
$('body').removeClass('Portait');
$('body').addClass(o);
});
  }
};

function isMobile(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
return true;
}else{
return false;
}
}

/*Add on the resize and orientation events for Mobile*/
if( isMobile() ) {
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
}

function setViewPort(mw){
if( isMobile() ) { //Only care about setting the view ports on mobile devices
$('body').addClass('mobileDevice');
if( mw == undefined ){
mw = minSiteWidth;
}

var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var ratio =  ww / mw; //calculate ratio
if( ww <= mw){ /*Phone Layout*/

$('body').addClass('phone');
$('body').removeClass('tablet');

$('.siteSection').width( mw );
$('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + ww);

}else{ /*Tablet / Desktop Layout */
$('body').addClass('tablet');
$('body').removeClass('phone');

$('.siteSection').width( ww );

$('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=no, width=' + ww);

if( ww >= maxSiteWidth ){
$('body').addClass('desktopDevice'); /*Optional */
}
}
}else{
$('body').addClass('desktopDevice');
}
}

/*Function to allow a delayed re-size trigger event*/
var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();


if( !isMobile() ) { /*This is for desktops, don't need it done on both*/
$(window).resize(function () { /*so that we don't have to coninuously call functions on a resize*/
waitForFinalEvent(function(){
var w = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width;
if(  w <= minSiteWidth ){
$('body').addClass('phone');
$('body').removeClass('desktopDevice');
$('body').removeClass('tablet');
log( "Gone to phone View");
}else if( w > minSiteWidth && w < maxSiteWidth ){
$('body').addClass('tablet');
$('body').removeClass('phone');
$('body').removeClass('desktopDevice');
log("Gone to Tablet View");
}else{
$('body').removeClass('phone');
$('body').removeClass('tablet');
$('body').addClass('desktopDevice');
log("Gone to Desktop View");
}
}, 500, "WindowResize");
});
}


setViewPort(minSiteWidth); //viewport for mobile devices

});