なんか蚊にくわれた。そろそろ蚊取り線香の出番ですかねー。
最近はレスポンシブウェブデザインが流行ってますね。このブログもレスポンシブデザインのテーマ「Renova」を使用しています。※スマートフォンで見た時だけレスポンシブデザインが働くようになってます)
さて、レスポンシブテーマを入れてたのはいいものの、一つ気になる点が。(スマートフォンで見ると)画像が画面からはみ出ちゃう。うーん、微妙に気になる。
・・・テーマ内でごりごり書くのは面倒くさいので、javascriptでさくっとリサイズさせるようにしました(・ω・)
<script type=’text/javascript’>
$(document).ready(function(){
var _ua = navigator.userAgent.toLowerCase();
if (! _ua.match(‘(iphone|android)’)) return
var _minimum = 260;
var _images = document.getElementsByTagName(‘img’);
var _len = _images.length;
if (_len < 1) return
for(var i=0;i<_len;i++){
try{
var _i = _images[i];
var _w = _i.width;
var _h = _i.height;
if(_w > _minimum){
var _ratio = _minimum/_w;
_i.width = _minimum;
_i.height = _h * _ratio;
}
}catch(e){}
}
});
</script>
[/html]
iPhone, Androidで見た時、画像の幅が260を超えていたら幅260にリサイズします。
jQueryを既に読み込んでいることが前提です。iPhone、Android以外の時は何もしません。各テーマのheader.php内、headタグの最後あたりにでも入れておくと動きます。
デフォルトのリサイズ幅は260となってますが、それ以上/以下にしたい場合は数字を変えて下さい。
やっつけスクリプトですが、画像がはみ出て困っている方はどうぞｗ