playing with scaling webpage to zoom by injecting js code to it

scaleToContent

  
var resetMetaTag = function(){
	metaTag = document.getElementsByName('viewport')
	console.log('removing existing meta tag if any if none exist then create one')
	console.log(metaTag.length)
	if(metaTag.length > 0 ) {
		metaTag[0].remove();
		console.log('removing existing meta tag if any')
	
	} else {
		var metaTag= metaTag[0] || document.createElement('meta');
		metaTag.name = "viewport";
		metaTag.content = "width=device-width, initial-scale=1.0";


		document.getElementsByTagName('head')[0].appendChild(metaTag);
	}

}


function redraw(element){

	var n = document.createTextNode(' ');
	var disp = element.style.display;  // don't worry about previous display style

	element.appendChild(n);
//	element.style.display = 'none';

	setTimeout(function(){
//	    element.style.display = disp;

	    n.parentNode.removeChild(n);
	    element.offsetHeight ; //this should by itself force redraw
	},0); // you can play with this timeout to make it as short as possible


}


function preScale(){
	return {'-webkit-transform': 'translate3d(0,0,0)',
		'backface-visibility': 'hidden'}

}
function clearScale(){
	return {'-webkit-transform': 'scale3d(1,1,1)',
			'-webkit-transform-origin': 'scale(1,1,1)'}
}

function textRendering(){
	return  {'text-rendering': 'optimizeLegibility'};
}

	
function calculateViewPortSize(){
	siteRealWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
	console.log("site RealWidth is:" + siteRealWidth); 
	realViewportWidth = window.screen.width;
	console.log("site viewPortWidth is:" + realViewportWidth );
}
function fitToScreen(){
	var scaleFactor = realViewportWidth  / siteRealWidth 
	console.log(scaleFactor);
//	return {'transform': 'scale3d('+scaleFactor+','+scaleFactor+','+scaleFactor+')', 
	return {'transform': 'scale('+ scaleFactor +')',
			'-webkit-transform-origin': '0 0'};
}

function reflow(elt){
    console.log(elt.offsetHeight);
}


function setStyle( el, propertyObject ) {
    for (var property in propertyObject)
    	el.style[property] = propertyObject[property];
}


var 	siteRealWidth =0;
var 	realViewportWidth =0;

var body = document.body;
var html = document.documentElement;




setStyle(html,preScale());
calculateViewPortSize()
resetMetaTag ();
reflow(html);
calculateViewPortSize()

//setStyle(html, clearScale());
setStyle(body,fitToScreen());
//setStyle(body,textRendering());
reflow(html)
//redraw(html)
redraw(body)

//  filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');

/*var scaleCode = 'function setStyle(t,e){for(var i in e)t.style[i]=e[i]}function fitToScreen(){var t=window.innerWidth/siteRealWidth;return console.log(t),{"-webkit-transform":"scale("+t+")","-webkit-transform-origin":"0 0"}}var metaTag=document.createElement("meta");metaTag.name="viewport",metaTag.content="width=device-width, initial-scale=1.0",document.getElementsByTagName("head")[0].appendChild(metaTag);var body=document.body,html=document.documentElement,siteRealWidth=Math.max(body.scrollWidth,body.offsetWidth,html.clientWidth,html.scrollWidth,html.offsetWidth);console.log("site RealWidth is:"+siteRealWidth),setStyle(document.body,fitToScreen());'
eval(scaleCode)*/