Fixing the auto scale on mobile devices

auto scale Cross Platform

Un updated version of this will come up several bug fixes, and a better experience.

Ever felt as if you tried so hard to, fix a problem on a mobile, and end up wasting hours finding fixes and ways to fix something, then even when you do, you get reports that a previous working or corrected problem re-appears? Because you changed device-width, or initial-scale, or perhaps something else, or perhaps recently bold coz you feel like pulling your hair out? well fear no more as this cross platform solution will solve, all your problems.

Most of us have heard of the mobile devices and would love to develop some sort of unified way to develop and stop wasting our time for each individual device.

Most device (if not all) use a something call the device DPI, which if I am not wrong it means “Dots per inch (DPI)”.

Right, where I am getting at is, instead of us trying to use loads of meta queries for different device sizes playing about with device width and size and all those boring and time wasting lines of code, (oh and not to mention the inspection tools are almost impossible).

So here is my magical code… Using jQuery, to wait for document to load, you will notice a timeout, there but this is done on purpose to fix the problem with some androids which gives incorrect width the first time or so I have read, but 1/4th of a second it’s almost nothing on mobile phones…

Firstly you need the initial meta tag on header…

...

;

$(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  
	$('').appendTo('head');//insert the new meta tag on the head 
},250);
});

;

I should mention that this, could be a couple pixels on and off as the `Math.floor` will remove any decimals, which DPI does not seem to accept.

@media screen and (max-width:480px) { 
   ... Your css goes here for mobile version ... 
}