mindon/fit.html

## fit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="Author" content="mindon@gmail.com">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telphone=no, email=no" />
<meta name="HandheldFriendly" content="true">
<title>fit</title>
<style>
html,body{height: 100%;overflow:hidden;padding:0;margin:0}
img{border: none;max-width:100%}
h1,p{width: 100%;color: #fff;font-size: 15px;position: absolute;top: 248px;left: 0;text-align: center;line-height: 1;padding:0;margin:0}
p{font-size: 9px;top: 282px;}
.page{
    position: relative;
    width: 320px;
    height: 504px;
    overflow: hidden;
    background-color: black;
}
</style>
</head>
<body>
<div class="page">
    <h1>TESTING</h1>
    <p>RESPONSIVE MOBILE WEB</p>
</div>
<script>
function fit(sl, mode, w, h) {
  var de = document.documentElement, bt = document.body.style,
    wd = de.clientWidth, hd = de.clientHeight,
    wp = w || 320, hp = h || 504,
    scd = wd / hd, scp = wp / hp,
    sc, sty, el, i = 0, k;
  if(!mode) {
    mode = "auto";
  }
  if( mode == 'contain') {
    sc = scd > scp ? hd / hp: wd / wp;
  } else if(mode == 'cover') {
    sc = scd < scp ? hd / hp: wd / wp;
  } else {
    sc = wd / wp;
  }

  var prefixs = ['webkit','moz','ms','o'], prefix,
    t = {width: wp+'px', height: hp+'px', transformOrigin: mode=='auto'? 'left top 0' : 'center center 0', transform: 'scale('+sc+')'};
  while(prefix = prefixs[i++]) {
    t[prefix+'TransformOrigin'] = t.transformOrigin;
    t[prefix+'Transform'] = t.transform;
  }
  if(mode != 'auto') {
    t.position = "absolute";
    t.left = "50%"; t.top = "50%";
    t.marginLeft = (-wp/2) + "px";
    t.marginTop = (-hp/2) + "px";
  }

  // fix all elements matched
  if(document.querySelectorAll) {
    var els = document.querySelectorAll(sl), i = 0;
    while(el = els[i++]) {
      sty = el.style;
      for(k in t) {sty[k] = t[k];}
    }

  } else if(sl.charAt(0) == '#') {
    el = document.getElementById(sl.substr(1));
    if(el) {
      sty = el.style;
      for(k in t) {sty[k] = t[k];}
    }

  } else {
    // [tag|div].class
    var j = sl.indexOf('.'), cl = j > -1 ? ' ' +sl.substr(j).replace(/\s*,.+/,'') +' ' : 0;
    var els = document.getElementsByTagName(j > 0 ? sl.substr(0,j) : 'div' ), i = 0, sty;
    while(el = els[i++]) {
      if(el.className && (' ' +el.className +' ').indexOf(cl) > -1) {
        sty = el.style;
        for(k in t) {sty[k] = t[k];}
      }
    }
  }

  if(mode == 'auto') {
    var hb = Math.floor(hp * sc);
    if(bt.height != hb) {
      bt.height = hb + "px"; // android 2.3.5 body height refresh bug
    }
  } else {
    bt.msTouchAction = "none"; // prevent default screen slide effect
    document.ontouchmove = function(e){e.preventDefault()};
  }

  if(fit.inited) {
    return false;
  }
  fit.inited = true;

  function refr(){fit(sl,mode,w,h);console.log(sl,mode,w,h)};
  if(window.addEventListener) {
    window.addEventListener('load',refr,false);
    window.addEventListener('resize',refr,false);
  } else if(window.attachEvent) {
    window.attachEvent('onload',refr);
    window.attachEvent('onresize',refr);
  }
}

fit('div.page', 'cover', 320, 504);
</script>
<!-- modified version from https://github.com/peunzhang/pageResponse -->
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="Author" content="mindon@gmail.com">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telphone=no, email=no" />
	<meta name="HandheldFriendly" content="true">
	<title>fit</title>
	<style>
	html,body{height: 100%;overflow:hidden;padding:0;margin:0}
	img{border: none;max-width:100%}
	h1,p{width: 100%;color: #fff;font-size: 15px;position: absolute;top: 248px;left: 0;text-align: center;line-height: 1;padding:0;margin:0}
	p{font-size: 9px;top: 282px;}
	.page{
	position: relative;
	width: 320px;
	height: 504px;
	overflow: hidden;
	background-color: black;
	}
	</style>
	</head>
	<body>
	<div class="page">
	<h1>TESTING</h1>
	<p>RESPONSIVE MOBILE WEB</p>
	</div>
	<script>
	function fit(sl, mode, w, h) {
	var de = document.documentElement, bt = document.body.style,
	wd = de.clientWidth, hd = de.clientHeight,
	wp = w \|\| 320, hp = h \|\| 504,
	scd = wd / hd, scp = wp / hp,
	sc, sty, el, i = 0, k;
	if(!mode) {
	mode = "auto";
	}
	if( mode == 'contain') {
	sc = scd > scp ? hd / hp: wd / wp;
	} else if(mode == 'cover') {
	sc = scd < scp ? hd / hp: wd / wp;
	} else {
	sc = wd / wp;
	}

	var prefixs = ['webkit','moz','ms','o'], prefix,
	t = {width: wp+'px', height: hp+'px', transformOrigin: mode=='auto'? 'left top 0' : 'center center 0', transform: 'scale('+sc+')'};
	while(prefix = prefixs[i++]) {
	t[prefix+'TransformOrigin'] = t.transformOrigin;
	t[prefix+'Transform'] = t.transform;
	}
	if(mode != 'auto') {
	t.position = "absolute";
	t.left = "50%"; t.top = "50%";
	t.marginLeft = (-wp/2) + "px";
	t.marginTop = (-hp/2) + "px";
	}

	// fix all elements matched
	if(document.querySelectorAll) {
	var els = document.querySelectorAll(sl), i = 0;
	while(el = els[i++]) {
	sty = el.style;
	for(k in t) {sty[k] = t[k];}
	}

	} else if(sl.charAt(0) == '#') {
	el = document.getElementById(sl.substr(1));
	if(el) {
	sty = el.style;
	for(k in t) {sty[k] = t[k];}
	}

	} else {
	// [tag\|div].class
	var j = sl.indexOf('.'), cl = j > -1 ? ' ' +sl.substr(j).replace(/\s*,.+/,'') +' ' : 0;
	var els = document.getElementsByTagName(j > 0 ? sl.substr(0,j) : 'div' ), i = 0, sty;
	while(el = els[i++]) {
	if(el.className && (' ' +el.className +' ').indexOf(cl) > -1) {
	sty = el.style;
	for(k in t) {sty[k] = t[k];}
	}
	}
	}

	if(mode == 'auto') {
	var hb = Math.floor(hp * sc);
	if(bt.height != hb) {
	bt.height = hb + "px"; // android 2.3.5 body height refresh bug
	}
	} else {
	bt.msTouchAction = "none"; // prevent default screen slide effect
	document.ontouchmove = function(e){e.preventDefault()};
	}

	if(fit.inited) {
	return false;
	}
	fit.inited = true;

	function refr(){fit(sl,mode,w,h);console.log(sl,mode,w,h)};
	if(window.addEventListener) {
	window.addEventListener('load',refr,false);
	window.addEventListener('resize',refr,false);
	} else if(window.attachEvent) {
	window.attachEvent('onload',refr);
	window.attachEvent('onresize',refr);
	}
	}

	fit('div.page', 'cover', 320, 504);
	</script>
	<!-- modified version from https://github.com/peunzhang/pageResponse -->
	</body>
	</html>