Monacaは一つのコードでandroidやappleのアプリを同時に作れるのがメリットですが、
端末によってディスプレイのサイズが違うのが難しいところです。
色々な端末があります・・・
tableタグなどでレイアウト調整すればいい場合もありますが、
今回苦戦したのがcanvasで大きな一枚絵を表示するケースです。
メインのマップを表示する際、後で色々なエフェクトを足したかったので
canvasを使う方法を選んだのですが、
まず、canvasを全画面にするのに一苦労。
こちらのページを参考にしました。
var main = document.getElementById("main");
mainhtml='<div id="wrapper" style=" width: 100%; height: 100%;
position: fixed;">';
mainhtml+='<canvas id= "world" onclick="coordinate()"></canvas>';
mainhtml+='</div>';
main.innerHTML =mainhtml;
$(function () {
sizing();
$(window).resize(function() {
sizing();
});
});
function sizing(){
$("#world").attr({height:$("#wrapper").height()});
$("#world").attr({width:$("#wrapper").width()});
}
これで、画面いっぱいに表示されました。
全画面表示成功
ところが、ipadのような端末のシミュレーターだと、縦横比が異なるため、
mapの見え方が変わってきてしまいます。
間延びした格好に
というわけで、画像の縦横比とcanvasの縦横比を比べて、
画像のほうが横長のときはcanvas内で縮めて表示するようにしました。
(画像の表示については、他の記事を見てください。)
if(img.width/canvaswidth> img.height/canvasheight)//横長の比率がcanvasのほうがきついとき
{
縦を少し縮めて表示
ctx.drawImage(img,0,0,img.width , img.height*(img.width/canvaswidth)/(img.height/canvasheight),0,0, canvaswidth, canvasheight);
}
else
{
//通常通り表示
ctx.drawImage(img,0,0,img.width , img.height,0,0, canvaswidth, canvasheight);
}
うまくいきました。下の開いたスペースには、後で飾りを入れてごまかしましょう。