縮小一辺倒にしかならない場合。
症例
例えばこんな感じでHTMLを用意していたとして。
<div class="graph">
<canvas id="chart"></canvas>
</div>
cssをこうしているとする。
.graph{
width: 100%;
}
読み込み時の領域に合わせてグラフが表示される。
ウィンドウを狭くすると、領域の幅に合わせてグラフ(canvas)も狭くなる。
ウィンドウを広げると、グラフは小さいまま。
狭める→広げる、読み込み→広げる、どちらも同じ。つまり、単純にグラフを大きくすることができない。
chart.jsはレスポンシブに対応してるはずなのにどうしてだ、ということになる。
原因
仕様です。
親要素(.graph)の高さが指定されていない・指定しても実数じゃない(%)場合、縮小しか対応しない。
対処法1
%はダメだけどvhやらvwは使える。グラフは初期状態なら大体2:1なので、例えばこんな感じでやれば無駄な余白を生むことなく設置できる。
.graph{
width: 100vw;
height: 50vw;
}
対処法2
youtube埋め込みのレスポンシブ化と同じ方法を使えば%指定で拡大対応の構築ができる。
.graph{
width: 100%;
height: 0;
padding-top: 50%;
position: relative;
}
.graph canvas#chart{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
高さは幅に準拠で幅を%で指定できるから、記事内に埋め込む用途の場合はこっちの方が楽だと思う。というか、これで統一して良いんじゃないかな。
js側でレスポンシブの記述は必要ない。CSSの調整だけで済むのでそこまで手間じゃない。
コメント