ambar/demo.html

## demo.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Page Zoom Test</title>
  <style type="text/css">
  body{
    font:20px/1.5 Cambria,Georgia,serif;
  }

  .fixed{
    font-size:10px;
    line-height:3;
    background:#9c2;
    position: fixed;
    right:10px;bottom:10px;width:300px;height:300px;
    border:5px solid #07a;
  }

  .text-size-adjust{
    -webkit-text-size-adjust:none;
    right:1em;bottom:1em;width:30em;height:30em;
    border-width:.5em!important;
  }

  @media only screen and (min-device-width : 320px) {
    .fixed {}
  }

  </style>
</head>
<body>

<h1>-webkit-text-size-adjust</h1>

<form>
  <label><input type="radio" name="adjust" value="js" checked>js</label>
  <label><input type="radio" name="adjust" value="css">css</label>
</form>

<div id="fixed" class="fixed">
  <p>line</p>
  <p>line</p>
  <p>line</p>
  <p>line</p>
</div>

<pre id="log"></pre>

<script>

$ = document.querySelector.bind(document)

log = $('#log')
fixed = $('#fixed')
cls = 'text-size-adjust'

var resize = function(e) {
  var ratio        = window.outerWidth / window.innerWidth
  log.textContent  = [window.outerWidth, window.innerWidth, ratio].join('\t')
  fixed.style.zoom = 1 / ratio
}

var adjust = function() {
  window.onresize = resize
  resize()
}

adjust()

$('form').onchange = function(e) {
  if( e.target.value === 'js' ){
    fixed.classList.remove(cls)
    adjust()
  }else{
    fixed.style.zoom = ''
    window.onresize  = null
    fixed.classList.add(cls)
  }
}

</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Page Zoom Test</title>
	<style type="text/css">
	body{
	font:20px/1.5 Cambria,Georgia,serif;
	}

	.fixed{
	font-size:10px;
	line-height:3;
	background:#9c2;
	position: fixed;
	right:10px;bottom:10px;width:300px;height:300px;
	border:5px solid #07a;
	}

	.text-size-adjust{
	-webkit-text-size-adjust:none;
	right:1em;bottom:1em;width:30em;height:30em;
	border-width:.5em!important;
	}

	@media only screen and (min-device-width : 320px) {
	.fixed {}
	}

	</style>
	</head>
	<body>

	<h1>-webkit-text-size-adjust</h1>

	<form>
	<label><input type="radio" name="adjust" value="js" checked>js</label>
	<label><input type="radio" name="adjust" value="css">css</label>
	</form>

	<div id="fixed" class="fixed">
	<p>line</p>
	<p>line</p>
	<p>line</p>
	<p>line</p>
	</div>

	<pre id="log"></pre>

	<script>

	$ = document.querySelector.bind(document)

	log = $('#log')
	fixed = $('#fixed')
	cls = 'text-size-adjust'

	var resize = function(e) {
	var ratio = window.outerWidth / window.innerWidth
	log.textContent = [window.outerWidth, window.innerWidth, ratio].join('\t')
	fixed.style.zoom = 1 / ratio
	}

	var adjust = function() {
	window.onresize = resize
	resize()
	}

	adjust()

	$('form').onchange = function(e) {
	if( e.target.value === 'js' ){
	fixed.classList.remove(cls)
	adjust()
	}else{
	fixed.style.zoom = ''
	window.onresize = null
	fixed.classList.add(cls)
	}
	}

	</script>
	</body>
	</html>