スマホの画面サイズに合わせて、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>