Mr_MONKの日記

■[技術メモ]HTML5　iphone4の描画が遅い件について

canvasを使ったコンテンツがiphone4だと遅いという報告が

あった。確かに旧機種のiphone3GS iphone3Gだとなめらかに

動いているのがiphone4だとカクカクになっている。

　もとが横３２０ドットのコンテンツなのだが

meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1"

のように指定してやると、iphone4の解像度640x960の解像度（横２倍）にスケーリングされるのだが、この状態だとなぜか遅くなるみたい。（device-widthはなぜか旧機種と同じ320になっているらしい）

で

meta属性でスケーリングしないように直値でwidthを640に指定して

やり

meta name="viewport" content="width=640,userscalable=no"

↓

javscriptでcanvas自体を２倍にスケーリングする

if(window.devicePixelRatio == 2)//iphone4の解像度か? {

canvas.setAttribute('width', 640);

canvas.setAttribute('height', 800);

ctx.scale(2.0,2.0);

}

のようにすると、iphone3Gほどではないが

描画速度がかなり改善することがわかった。

javascriptはスクリプト中でiphone4かどうか判断して

同じものが使えるのだが

viewportの指定部分を　同じHTMLで機種ごとに

切り替える方法がまだわからない。

Permalink | コメント(0) | トラックバック(0)