jQueryMobileでデバイスの向きを変えた際に画像サイズも変更 -orientationchange を使ってみた-

公開日： 2012/02/16 : jQueryMobile

端末が縦・横に変化した際に画像サイズを変えたいことがあったのでちょろっとjQueryMobileでやってみました。
※ちなみにmax-widthを使えば解決するケースが多いかと思います。

　前提

jQueryMobile1.0.1を使用(もちろんjQueryも)
imgタグにオリジナルの画像サイズをowidth、oheightとして付与。

以下みたいな感じ

<img id="img-view" src="sample.jpg" owidth=520 oheight=340>

　やったこと

やったことの流れは以下のとおりです。

orientationchangeイベントをbind
- jQueryMobileでの端末の縦・横変化時のイベント
検知したら画像のwidthとheightを変更

ソースにすると以下のような感じ。

(function( $, undefined ){
 $(window).bind('orientationchange', function(e){
    var max = $(this).width()-40; //余白をもたせている
    var w = $('.ui-page-active .img-view').attr('owidth');
    var h = $('.ui-page-active .img-view').attr('oheight');
    if (w > max && h > 0) {
     $('.ui-page-active .img-view').width(max).height(Math.round( (max/w) * h));
    }
 });
}( jQuery ));

[.ui-page-activeを指定している理由]
ajaxを使ってページ遷移しまくっている場合、imgタグが複数箇所存在してowidth、oheightで取得する値が変になるケースがある。
そこで、現在見ているページにある画像タグのowidth、oheightを取得したいために指定している。

[width()とheight()]
jQueryのwidth()で現在のウィンドウサイズを取得し、width(値)とheight(値)を使って画像のwidthとheightを変更している。

[おまけ]
上記で端末が横や縦になった際に画像をリサイズしてくれる。
それ以外にも、表示されている端末のウィンドウサイズにあわせて変更したいというケースもあるかもしれない。
そういうときは、pageshowなどをbindして同様の処理をしたら良い。

[追記]
最初に書きましたが、max-widthを使えばjavascriptを使わなくても解決するケースが多いかと思います。
今回のケースだと、色々と数値をいじれるところがミソになります。