スマートフォン用表示で画像幅を自動で調整するスクリプト

ご覧の通り、テンプレートデザインをちょこっと変更しました。
お仕事用サイトがかなり派手になったので、こっちが少し寂しいかもーと思っちゃって。
お仕事用サイトはコンテンツがまだ十分じゃないので、ちゃんとできたら出来ました記事書きます。
スマフォ用テンプレートでタイトルの様なスクリプト書いたので、とりあえずシェアしておこうかな、という記事です。


以前リニューアルしましたの記事でスマフォ表示でいい方法模索中とありましたが、くろひつじの書物占いで使った「WPtap Mobile Detector」と「MW Theme Switcher on WPtap」を使う方法でスマフォ表示を実現しました。
テンプレートを2つ作る必要はありますが、個人的にはこれが一番やりやすいです。

んで、スマフォ表示用テンプレを作るにあたり、記事内で使用してる画像をどうしようかなーとおもって。
width:100%を指定すると、画面幅より小さい画像が大きく出ちゃうので、うーん、と悩んだんですが、jQueryで画像の幅に応じて適用させればいいかな、と。

$(function() {
	$('.post img').each(function () {
		$imgWidth = $(this).width();
		$windowWidth = window.innerWidth;
		$parentWidth = $windowWidth - 20;
		if($imgWidth >= $parentWidth){$(this).css('width','100%').css('height','auto');}
	});
});

記事内のimgタグの幅を調べ、画面幅と比べて大きい場合はwidth:100%を指定、というスクリプトです。
幅だけ変えると縦伸びになるので高さはautoで調整。
画像に装飾加えたり、padding指定したりしてるので、画面幅はその分をマイナスして比べるようにしています。

サンプルはこちら。
サンプルではimgタグの一つ上のタグの幅と比べるようにしています。

自分はこんな感じでjQueryに頼っちゃいましたけど、他にもスマフォ用に最適化してる方々はどんな風に画像幅の調整してるんでしょう?@・ェ・@

UPDATE : 2013/08/20 / Tags

関連記事

新着記事

コメントを残す