kzkamiya/index.html

## index.html
<!DOCTYPE html>
<html>
<!--
https://bl.ocks.org/kzkamiya/raw/7e2db9402800d46fcc0f/
-->
<head>
<meta chraset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>

<style>

.flex-container  {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;

  justify-content: flex-start;
  -webkit-justify-content: flex-start;

}

.flex-item  {
  background: tomato;
  padding: 5px;
  width: 100%;
  height: 2em;
  margin-top: 10px;

  line-height: 1.1em;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
}

</style>

<article>
<hgroup>
<h1>Rotation TEST</h1>
<h2>HTML5+CSS3</h2>
</hgroup>
<p>Test of rotation.</p>
<section>
    <h1>Display Information.</h1>
    <ul id="flex-container" class="flex-container">
    </ul>
</section>
</article>

<script>

var ul = document.getElementById('flex-container');
function addMessage(msg, id) {
      console.log(msg);
      var li = document.createElement('li');
      li.className = "flex-item";
      content = document.createTextNode(msg);
      li.appendChild(content);
      if (id) {
        li.id = id;
        var oldLi = document.getElementById(id);
        if (oldLi) {
          var oldMsg = oldLi.innerHTML;
          li.innerHTML = oldMsg + " ---> " + msg;
          ul.replaceChild(li, oldLi);
          return;
        }
      }
      ul.appendChild(li);
};

function getInfo() {
  var objHtml = document.getElementsByTagName('html').item(0);
//  var scale = window.innerWidth / 720 * 100 + "%";
//  objHtml.style.zoom = scale;
  addMessage("scrollTop = " + document.documentElement.scrollTop || document.body.scrollTop, 'scrollTop');
  addMessage("scrollLeft = " + document.documentElement.scrollLeft || document.body.scrollLeft, 'scrollLeft');
  addMessage("scrollWidth = " + document.documentElement.scrollWidth || document.body.scrollWidth, 'scrollWidth');
  addMessage("scrollHeight = " + document.documentElement.scrollHeight || document.body.scrollHeight, 'scrollHeight');
  addMessage("clientWidth = " + document.documentElement.clientWidth || document.body.clientWidth, 'clientWidth');
  addMessage("clientHeight = " + document.documentElement.clientHeight || document.body.clientHeight, 'clientHeight');

  addMessage("window.innerWidth = " + window.innerWidth, 'innerWidth');
  addMessage("window.outerWidth = " + window.outerWidth, 'outerWidth');
  addMessage("screen.width = " + screen.width, 'screen.width');
  addMessage("window.innerHeight = " + window.innerHeight, 'innerHeight');
  addMessage("window.outerHeight = " + window.outerHeight, 'outerHeight');
  addMessage("screen.height = " + screen.height, 'screen.height');
  addMessage("window.orientation = " + window.orientation, 'orientation');
  addMessage("objHtml.style.zoom = " + objHtml.style.zoom, 'zoom');
}

window.addEventListener('load', function () {
  addMessage("**** load ****",'status');
  getInfo();
});

window.addEventListener('resize', function () {
  addMessage("**** risize ****",'status');
  getInfo();
});

window.addEventListener('orientationchange', function () {
  addMessage("**** orientationchange ****",'status');
  getInfo();
});


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<!--
	https://bl.ocks.org/kzkamiya/raw/7e2db9402800d46fcc0f/
	-->
	<head>
	<meta chraset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	</head>
	<body>

	<style>

	.flex-container {
	padding: 0;
	margin: 0;
	list-style: none;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;

	justify-content: flex-start;
	-webkit-justify-content: flex-start;

	}

	.flex-item {
	background: tomato;
	padding: 5px;
	width: 100%;
	height: 2em;
	margin-top: 10px;

	line-height: 1.1em;
	color: white;
	font-weight: bold;
	font-size: 1em;
	text-align: left;
	}

	</style>

	<article>
	<hgroup>
	<h1>Rotation TEST</h1>
	<h2>HTML5+CSS3</h2>
	</hgroup>
	<p>Test of rotation.</p>
	<section>
	<h1>Display Information.</h1>
	<ul id="flex-container" class="flex-container">
	</ul>
	</section>
	</article>

	<script>

	var ul = document.getElementById('flex-container');
	function addMessage(msg, id) {
	console.log(msg);
	var li = document.createElement('li');
	li.className = "flex-item";
	content = document.createTextNode(msg);
	li.appendChild(content);
	if (id) {
	li.id = id;
	var oldLi = document.getElementById(id);
	if (oldLi) {
	var oldMsg = oldLi.innerHTML;
	li.innerHTML = oldMsg + " ---> " + msg;
	ul.replaceChild(li, oldLi);
	return;
	}
	}
	ul.appendChild(li);
	};

	function getInfo() {
	var objHtml = document.getElementsByTagName('html').item(0);
	// var scale = window.innerWidth / 720 * 100 + "%";
	// objHtml.style.zoom = scale;
	addMessage("scrollTop = " + document.documentElement.scrollTop \|\| document.body.scrollTop, 'scrollTop');
	addMessage("scrollLeft = " + document.documentElement.scrollLeft \|\| document.body.scrollLeft, 'scrollLeft');
	addMessage("scrollWidth = " + document.documentElement.scrollWidth \|\| document.body.scrollWidth, 'scrollWidth');
	addMessage("scrollHeight = " + document.documentElement.scrollHeight \|\| document.body.scrollHeight, 'scrollHeight');
	addMessage("clientWidth = " + document.documentElement.clientWidth \|\| document.body.clientWidth, 'clientWidth');
	addMessage("clientHeight = " + document.documentElement.clientHeight \|\| document.body.clientHeight, 'clientHeight');

	addMessage("window.innerWidth = " + window.innerWidth, 'innerWidth');
	addMessage("window.outerWidth = " + window.outerWidth, 'outerWidth');
	addMessage("screen.width = " + screen.width, 'screen.width');
	addMessage("window.innerHeight = " + window.innerHeight, 'innerHeight');
	addMessage("window.outerHeight = " + window.outerHeight, 'outerHeight');
	addMessage("screen.height = " + screen.height, 'screen.height');
	addMessage("window.orientation = " + window.orientation, 'orientation');
	addMessage("objHtml.style.zoom = " + objHtml.style.zoom, 'zoom');
	}

	window.addEventListener('load', function () {
	addMessage("** load **",'status');
	getInfo();
	});

	window.addEventListener('resize', function () {
	addMessage("** risize **",'status');
	getInfo();
	});

	window.addEventListener('orientationchange', function () {
	addMessage("** orientationchange **",'status');
	getInfo();
	});


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