スマホの画面サイズに合わせて、canvasのサイズを設定する
HTML側は以下のようにする。canvasタグをdivタグ（id=”wrapper”の）で囲っておく。
divタグはCSSで幅高さ100%にしておき、Canvasのサイズは最初のページ読み込み時に、JavaScript側でdivタグの幅高さサイズをセットすることでcanvasのサイズを設定している。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
display:block;
background-color:#3399CC;
}
html, body, #wrapper{
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="init()">
<div id="wrapper">
<canvas id="aaa"></canvas>
</div>
</body>
</html>
JavaScriptは以下のように。
<script>
function init() {
var wpr = document.getElementById("wrapper");
var cvs = document.getElementById("aaa");
cvs.width = wpr.offsetWidth;
cvs.height = wpr.offsetHeight;
window.alert("screen.width " + screen.width + "、" + "screen.height " + screen.height + "\n"
+ "cvs.width " + cvs.width + "、" + "cvs.height " + cvs.height);
}
</script>
