/sv01.html

## sv01.html
<!DOCTYPE html>
<!-- vim:expandtab:ts=2:sw=2:filetype=html
-->
<html>
  <head>
    <title>Studying viewport</title>
    <style type="text/css">
body {
  background-color: #000000;
  width: 1000px;
  height: 1000px;
}
.stdout {
  background-color: #ffffff;
}
.info {
  width: 100%;
  height: 200px;
  overflow: scroll;
}
    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  </head>
  <body>
  <p>
  <a href='http://www.quirksmode.org/mobile/viewports2.html'>viewports2</a>
  </p>
  <div class="info">
  <pre class="stdout" id="preStdout">
  </pre>
  </div>
  </body onload="init()">
  <script>


var sStdout = d3.select(".stdout")
;
var sInfo = d3.select(".info")
;


var strStdout = "";
function appendLine (l) {
  strStdout += "\n";
  //strStdout += (new Date())
  //strStdout += " $ ";
  strStdout += l;
  sStdout.text(strStdout);
}
function clearLine () {
  strStdout = "";
}


/**
 * https://developer.mozilla.org/ja/docs/Web/API/Screen/width
 * デバイスの画面サイズ
 * ブラウザのサイズではない
 */
function getScreenWidth() { return window.screen.width; }
function getScreenHeight() { return window.screen.height; }
function wScreenSize () {
  appendLine(
    "[SCREEN]" +
    "\n" +
    "  window.screen.width:" + getScreenWidth() +
    "\n" +
    "  window.screen.height:" + getScreenHeight()
  );
}

/**
 * https://developer.mozilla.org/ja/docs/Web/API/Screen/width
 * Visual viewport
 * ブラウザ上の可視領域のサイズ
 */
function getVisualViewportWidth() { return window.innerWidth; }
function getVisualViewportHeight() { return window.innerHeight; }
function wVisualViewport () {
  appendLine(
    "[VISUAL VIEWPORT]" +
    "\n" +
    "  window.innerWidth:" + getVisualViewportWidth() +
    "\n" +
    "  window.innerHeight:" + getVisualViewportHeight()
  );
}

/**
 * https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth
 * Layout viewport
 * 要素のサイズ(CSS において指定されている)
 * paddingを含み、垂直スクロールバー(存在するならば)、border、marginを含みません。
 */
function getLayoutViewportWidth() { return d3.select("body").property("clientWidth"); }
function getLayoutViewportHeight() { return d3.select("body").property("clientHeight"); }
function wLayoutViewport () {
  appendLine(
    "[LAYPUT VIEWPORT]" +
    "\n" +
    "  body.clientWidth:" + getLayoutViewportWidth() +
    "\n" +
    "  body.clientHeight:" + getLayoutViewportHeight()
  );
}

/**
 * ズームレベルの算出
 */
function getZoomLevel() { return getScreenWidth() / getVisualViewportWidth(); }
function wZoomLevel () {
  appendLine(
    "[ZOOM LEVEL]" +
    "\n  " + getZoomLevel()
  );
}


function resize() {
  clearLine();
  wScreenSize();
  wVisualViewport();
  wLayoutViewport();
  wZoomLevel();
}

window.onresize = function () {
  resize();
};
document.body.addEventListener("touchstart", function () { resize(); });

resize();
  </script>
</html>
	<!DOCTYPE html>
	<!-- vim:expandtab:ts=2:sw=2:filetype=html
	-->
	<html>
	<head>
	<title>Studying viewport</title>
	<style type="text/css">
	body {
	background-color: #000000;
	width: 1000px;
	height: 1000px;
	}
	.stdout {
	background-color: #ffffff;
	}
	.info {
	width: 100%;
	height: 200px;
	overflow: scroll;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<p>
	<a href='http://www.quirksmode.org/mobile/viewports2.html'>viewports2</a>
	</p>
	<div class="info">
	<pre class="stdout" id="preStdout">
	</pre>
	</div>
	</body onload="init()">
	<script>


	var sStdout = d3.select(".stdout")
	;
	var sInfo = d3.select(".info")
	;


	var strStdout = "";
	function appendLine (l) {
	strStdout += "\n";
	//strStdout += (new Date())
	//strStdout += " $ ";
	strStdout += l;
	sStdout.text(strStdout);
	}
	function clearLine () {
	strStdout = "";
	}


	/**
	* https://developer.mozilla.org/ja/docs/Web/API/Screen/width
	* デバイスの画面サイズ
	* ブラウザのサイズではない
	*/
	function getScreenWidth() { return window.screen.width; }
	function getScreenHeight() { return window.screen.height; }
	function wScreenSize () {
	appendLine(
	"[SCREEN]" +
	"\n" +
	" window.screen.width:" + getScreenWidth() +
	"\n" +
	" window.screen.height:" + getScreenHeight()
	);
	}

	/**
	* https://developer.mozilla.org/ja/docs/Web/API/Screen/width
	* Visual viewport
	* ブラウザ上の可視領域のサイズ
	*/
	function getVisualViewportWidth() { return window.innerWidth; }
	function getVisualViewportHeight() { return window.innerHeight; }
	function wVisualViewport () {
	appendLine(
	"[VISUAL VIEWPORT]" +
	"\n" +
	" window.innerWidth:" + getVisualViewportWidth() +
	"\n" +
	" window.innerHeight:" + getVisualViewportHeight()
	);
	}

	/**
	* https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth
	* Layout viewport
	* 要素のサイズ(CSS において指定されている)
	* paddingを含み、垂直スクロールバー(存在するならば)、border、marginを含みません。
	*/
	function getLayoutViewportWidth() { return d3.select("body").property("clientWidth"); }
	function getLayoutViewportHeight() { return d3.select("body").property("clientHeight"); }
	function wLayoutViewport () {
	appendLine(
	"[LAYPUT VIEWPORT]" +
	"\n" +
	" body.clientWidth:" + getLayoutViewportWidth() +
	"\n" +
	" body.clientHeight:" + getLayoutViewportHeight()
	);
	}

	/**
	* ズームレベルの算出
	*/
	function getZoomLevel() { return getScreenWidth() / getVisualViewportWidth(); }
	function wZoomLevel () {
	appendLine(
	"[ZOOM LEVEL]" +
	"\n " + getZoomLevel()
	);
	}


	function resize() {
	clearLine();
	wScreenSize();
	wVisualViewport();
	wLayoutViewport();
	wZoomLevel();
	}

	window.onresize = function () {
	resize();
	};
	document.body.addEventListener("touchstart", function () { resize(); });

	resize();
	</script>
	</html>