Android4.0とCanvasメモ

Android 4.0以降の一部の端末でCanvas関係でブラウザが終了するやつ。
描画サイズがでか過ぎたせいで落ちてる可能性。

Android 4.0以降のデフォルトブラウザはJavaScriptのscreen.widthが実際の解像度で返ってくるが、
iPhoneや、Android 2.x、Google ChromeだとdevicePixelRatioで割った値が返ってくる。

例:SC-02E(Galaxy Note 2)だとデフォルトブラウザで720なのに、Chromeだと360

function init() {
	var devicePixelRatio = window.devicePixelRatio;
	var width = screen.width;
	var canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
	ctx.scale(devicePixelRatio, devicePixelRatio);            
	if (width <= 360)
	{
	    canvas.width = width * devicePixelRatio;
	    canvas.height = 400 * (width / 320) * devicePixelRatio;
	    canvas.style.width = width + "px";
	    canvas.style.height = 400 * (width / 320) + "px";
	else
	{
	    canvas.width = width / devicePixelRatio;
	    canvas.height = 400 * (width / devicePixelRatio / 320);
	    canvas.style.width = (width / devicePixelRatio) + "px";
	    canvas.style.height = 400 * (width / devicePixelRatio / 320) + "px";
	}
}
広告