Checksum/Canvas_Viewport.html

## Canvas_Viewport.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fit canvas to viewport for mobile devices</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  #container {
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 2px;
  }
  canvas {
   display: block;
  }
  </style>
</head>
<body>
  <div id="container">
    <canvas id="workspace" width="800" height="600"></canvas>
  </div>
  <script>
  (function() {
    // We are resizing for mobile devices only. For other devices, the
    // dimensions will be stuck at 800 * 600. To change the default dimensions,
    // change the height and width of the canvas and the width of the #container
    var win = window,
        doc = document,
        w = win.innerWidth,
        h = win.innerHeight,
        container = doc.getElementById('container'),
        canvas = doc.getElementById('workspace');

    if( win.navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/i) ) {
      canvas.height = h;
      canvas.width  = w;
      container.style.height = h+"px";
      container.style.width = w+"px";
    }
  })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Fit canvas to viewport for mobile devices</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	#container {
	margin: 0 auto;
	width: 800px;
	overflow: hidden;
	position: relative;
	border: 1px solid #000;
	border-radius: 10px;
	margin-top: 2px;
	}
	canvas {
	display: block;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<canvas id="workspace" width="800" height="600"></canvas>
	</div>
	<script>
	(function() {
	// We are resizing for mobile devices only. For other devices, the
	// dimensions will be stuck at 800 * 600. To change the default dimensions,
	// change the height and width of the canvas and the width of the #container
	var win = window,
	doc = document,
	w = win.innerWidth,
	h = win.innerHeight,
	container = doc.getElementById('container'),
	canvas = doc.getElementById('workspace');

	if( win.navigator.userAgent.match(/(iPhone\|iPod\|iPad\|Android\|BlackBerry)/i) ) {
	canvas.height = h;
	canvas.width = w;
	container.style.height = h+"px";
	container.style.width = w+"px";
	}
	})();
	</script>
	</body>
	</html>