スマホ用画像サイズ自動変換スクリプト

スマホは縦表示と横表示がある為、カンプ作成時に画像解像度に注意しないと、横表示したときに画像がきれいに表示されなくなってしまう。

で、大きめに作った画像たちを、各スマホ画面にジャストフィットさせる為のスクリプトを作たった。
もちろん、画像ごとに比率で拡大縮小を行うので、レイアウトが崩れることはまずないと思う（cssでちゃんとレイアウトしているのが前提）。

ただし！cssに指定した画像には効きません。

まずhtmlにて呼び出し＆初期値設定。

<script type="text/javascript" src="js/imageResize.js"></script>
<script type="text/javascript">
// カンプ作成時に想定していたサイトの全体幅を設定
imageResize.config.iniSiteWidth = 480;
// リサイズ開始
imageResize.set();
</script>

次にメインスクリプト

/*
 * imageResize.js
 * http://d.hatena.ne.jp/bondx2/
 *
 * @version
 * 1.0.0 (March 14 2012)
 *
 * @copyright
 * Copyright (C) 2012 http://d.hatena.ne.jp/bondx2/
 */
 

if ( ! window.imageResize ) var imageResize = function() {
var isc = {
    // configuration
    config: {
        margin: 0
        ,iniSiteWidth : 240
        ,portraitWidth :  window.innerWidth
        ,landscapeWidth :  window.innerheight
		
    }
    ,items: null
    ,getItems: function(){
        if ( ! isc.items ) isc.items = function() {
            var m, i
                ,images = document.getElementsByTagName( "img" )
                ,items = new Array()
            ;
            for ( i = 0; i < images.length; i++ ) {
                m = images[ i ];
                items.push( {
                    originalWidth: m.width
                    ,originalHeight: m.height
                    ,img: m
                } );
            }
            return items;
        }();
        return isc.items;
    }
    ,setSize: function() {
        var w, h, m, i
            ,items = isc.getItems()
            ,config = isc.config
            ,maxWidth = Math.abs( window.orientation ) === 90
                ? config.landscapeWidth - config.margin
                : config.portraitWidth - config.margin
        ;
        for ( i = 0; i < items.length; i++ ) {
            m = items[ i ];
            w = m.originalWidth;
            h = m.originalHeight;
            m.img.width = (window.innerWidth * w) / config.iniSiteWidth;
            m.img.height = h * (m.img.width / w);
        }
    }
    ,set: function() {
        var f = isc.setSize;
        window.addEventListener( "load", f, false );
        window.addEventListener( "orientationchange", f, false );
    }
	
};
return isc;
}();

このスクリプトのミソはここ

m.img.width = (window.innerWidth * w) / config.iniSiteWidth;
m.img.height = h * (m.img.width / w);

１行目は、
「初期サイト幅」：「デバイス画面幅」 ＝ 「初期画像幅」：「修正後画像幅」
の計算をおこなっている。
求めるべき答は、修正後画像幅(m.img.width)。

２行目は、修正後画像高さの算出をおこなう。
「修正後画像幅 / 初期画像幅」で拡大縮小の比率が出るので、その比率で修正後の画像の高さを求める。

※ただし、
「window.orientation」が効かないスマホもあるらしいので、そうした場合もちろんこのスクリプトは効かない。
しかも、最初の画面幅で画像をリサイズしたままになるので、向きを変えた時に再度画像がリサイズされない。

向きを変えた時の画像リサイズは、先に読み込むソースを下記のように修正したらできました。

結局以下のようにしました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/imageResize.js"></script>
<script type="text/javascript">
// カンプ作成時に想定していたサイトの全体幅を設定
imageResize.config.iniSiteWidth = 480;

var initDispWidth = 0;
if(window.innerWidth > window.innerHeight){
  initDispWidth = imageResize.config.landscapeWidth;
}else {
  initDispWidth = imageResize.config.portraitWidth;
}

// リサイズ開始
imageResize.set();
window.onorientationchange = function() {
  if(window.innerHeight > window.innerWidth){
      $('body').css('width', initDispWidth);
      imageResize.set();
    }else{
      $('body').css('width', initDispWidth);
      imageResize.set();
      
  }
}
</script>

う〜ん。
まだダメみたい。

スマホ判定入れて幅指定とかもっと詳細化しないとダメそう。

つづく