レスポンシィブＷｅｂデザイン、画像サイズも可変にしたい

ジョグナビをレスポンシィブにということで、チャレンジ中。以下のようにしたら、何となく動いているような・・・かなり適当です。

画像サイズをスマホの時は小さくしないとＮＧだ

さて、でも、問題があります。メディアクエリだけでやってもロゴの画像サイズも大小可変にしないとだめだなぁ。スマホ画面では収まらないという問題が生じました。昨年のＹＡＰＣのどこかのトークで、サーバー側で返す画像を変えているという話をきいたような記憶があるような。ないような。

同じ画像でサイズを変える戦略だと

同じ画像でwidthとheight指定を変える戦略は。でも、そうすると帯域！を使ってしまうけど・・・・

nginxのreverseproxyで配信しているんですから。どうやってユーザーエージェントを見分けて返す画像を変えればいいんだろう。というところを調査しないといけないという話になる。可変な画像サイズの取り扱いって難しそうだな。

@media (min-width: 1200px) {
  #map_canvas { width: 580px;    height : 580px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
  #map_canvas { width: 480px;    height : 480px;}
}

@media (min-width: 768px) and (max-width: 991px) {
  #map_canvas { width: 700px;    height : 700px;}
}

@media (max-width: 767px) {
  #map_canvas { width: 480px;    height : 480px;}
}

@media (max-width: 479px) {
  #map_canvas { width: 240px;    height : 240px;}
}

以下スマホで見るとロゴが切れる様子です

f:id:kechiya:20131117050919p:plain

グーグル先生に聞いたら

responsive img tag があるとのこと。やってみるかな。

簡単！リアルタイム画像変換をNginxだけで行う方法

とりあえず、ロゴだけなんで、リアルタイム画像変換は行わなくてよいでしょう。でも、知っていおいたほうがいいなぁ。簡単！リアルタイム画像変換をNginxだけで行う方法

結局

よくよく調べたら、srcsetアトリビュートがはっきり仕様書にあるので、、これに乗っておけばOKなのかも。

WebKitがsrcsetを実装！レスポンシブイメージの問題が大きく前進

[WebKit （Nightly Builds）で srcset 属性がサポートされたらしい] (http://hyper-text.org/archives/2013/08/webkit_support_srcset_attribute.shtml)

鈍足ランナーのＩＴ日記

走るのが好きな5流のＩＴエンジニアのブログ。