RsD0p9BK
2/26/2016 - 5:20 AM

Fixing the auto scale on mobile devices

Fixing the auto scale on mobile devices

// <meta name="viewport" content="width=320,initial-scale=1.0,target-densityDPI=320dpi">

$(document).ready(function (){
	setTimeout(function (){
		
		var w1 = $(window).width();
		$('meta[name="viewport"]').remove();//remove previous metatag (no reason just so we keep it clean)
		
		var px = 480;//target width to achieve
		var x = 320/w1;// calculate ratio (320 is the width set by viewport on head->meta,
		var out = Math.floor(px*x);//outcome..
		// var out = Math.floor( (32/ w1) * 480 )// alternative shortcode remove the 3 lines above :)
		
		//insert the new meta tag on the head 
		$('<meta name="viewport" id="the_vp_special" content="width=320,initial-scale=1.0,target-densityDPI='+out+'dpi"/>').appendTo('head');
		
	},250);
});

// http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/