HTML5 iphone4の描画が遅い件について
canvasを使ったコンテンツがiphone4だと遅いという報告が
あった。確かに旧機種のiphone3GS iphone3Gだとなめらかに
動いているのがiphone4だとカクカクになっている。
もとが横320ドットのコンテンツなのだが
meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1"
のように指定してやると、iphone4の解像度640x960の解像度(横2倍)にスケーリングされるのだが、この状態だとなぜか遅くなるみたい。(device-widthはなぜか旧機種と同じ320になっているらしい)
で
meta属性でスケーリングしないように直値でwidthを640に指定して
やり
meta name="viewport" content="width=640,userscalable=no"
↓
javscriptでcanvas自体を2倍にスケーリングする
if(window.devicePixelRatio == 2)//iphone4の解像度か? {
canvas.setAttribute('width', 640);
canvas.setAttribute('height', 800);
ctx.scale(2.0,2.0);
}
のようにすると、iphone3Gほどではないが
描画速度がかなり改善することがわかった。
javascriptはスクリプト中でiphone4かどうか判断して
同じものが使えるのだが
viewportの指定部分を 同じHTMLで機種ごとに
切り替える方法がまだわからない。