2013年3月12日火曜日

スマホ:画面サイズを合わせる(回転、Android、iphone 対応)


以下の bwidth = 640 は作成しているサイトの幅を指定する。
幅が 960px だったら、 bwidth = 960 とする。

<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
$(window).bind('resize load', function(){
    var rw = $(window).width();

    var swidth = 320;  // 小さい機種などの解像度
    var bwidth = 640; // 自分のサイトのサイズ

    if(rw <= swidth) {
        $("html").css("zoom" , bwidth / swidth);
    }
    else {
        $("html").css("zoom" , rw / bwidth );
    }
    $("body").css("-webkit-text-size-adjust" , "100%");
});
</script>

一応要テスト。