あんまりないケースかもしれませんが、携帯ページと同じような見た目をPC、スマフォでも実現したい場合。
基本的に携帯は横幅が240pxもしくは480pxなので、どちらにも対応しようとすると必然的に画像の横幅とかはパーセント指定にならざるを得ません。
ところがパーセント表示にした画像をPCブラウザとかで見るとすごいことに。
表示領域に対するパーセンテージで計算するので、元々小さい画像がものすごく引き伸ばされます。
これを防ぎ、PCやスマフォでも携帯と同じように横幅240pxで表示されるようなスクリプトを書いてみました。
要は一番外側のブロックの幅を240pxにしてしまえば、画像の大きさなどはその幅に対するパーセンテージに切り替わるので解決なわけです。
携帯ページでは基本javascriptが使えないので、「UAが携帯でない場合のみ」幅調整のJSを読み込むようになっています。
<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if( (preg_match(’{^DoCoMo/[12]\.0}’, $agent))||(preg_match(’{^(J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank)/}’, $agent))||(preg_match(’/^KDDI\-|UP\.Browser/’, $agent))||(preg_match(’{^PDXGW/|DDIPOCKET;|WILLCOM;}’, $agent)) ):
?>
<?php else: ?>
<script type=’text/javascript’ src=’http://www.google.com/jsapi’>
<script type=’text/javascript’>google.load(’jquery’, ‘1.3.2′);
<script type=”text/javascript”>
//<![CDATA[
$(document).ready(function () {
$("#content_wrapper").css("width","240px");
});
//]]>
<?php endif; ?>
若干力技ではありますが、ちゃんと動いているので善し。