あんまりないケースかもしれませんが、携帯ページと同じような見た目を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; ?>
若干力技ではありますが、ちゃんと動いているので善し。
この投稿へのコメント