まめしみ

やったことを淡々と書く


 

240px基準で作成してある携帯サイトをスマートフォン対応させる方法

携帯サイトをスマートフォンでみたら画面いっぱいに表示した画像が小さくてレイアウトが崩れた経験ありませんか?

PCサイトがあるならそちらに割り振るほうがいいのですが、
スマートフォンの画面サイズに合わせて拡大縮小すればそこそこ見栄えよくなります。
ついでに左右に余白いれて見やすくしてみます。
 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=yes>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(function(){$("html").hide();});
$(window).bind('resize load orientationchange', function(){
  $("img").css("zoom" , ($(window).width() - 10)/240 );
  $("body").css("padding", "0px 5px");
  $("html").show();
});
</script>
<head>

今回は240px基準で作成してある前提です。
まずはmetaタグのviewportを追加します。

(画面サイズ - 余白) / 240

こんな感じに比率を求めてzoom処理します。
あとは余白をつけてお終いです。

これだけでいい感じになります。
「orientationchange」にもbindしてるので画面を横向きにしてもOK!!

 

※追記
画像がズームされるときの動きが気になったので、ズーム処理は非表示状態で行うように調整。

 

You can leave a response, or trackback from your own site.

Leave a Reply