見出し画像

スマホサイトをブラウザサイズにあわせる方法

JQueryが入っている前提

【STEP1】
View側に以下のコードをコピペ
共通のhead内に記述しちゃうのが楽ちん

<script type="text/javascript">

    $(window).bind(‘resize load’, function(){
    $(‘html’).css(‘zoom’, $(window).width()/1024 );
    });

</script>​

1024の所は適宜作っているサイトによって変更が必要なはず

【STEP2】
メタ情報に下記を追加

<meta name=”viewport” content=”width=device-width, user-scalable=no”>


これで終わり。

iPhoneとAndroidで挙動が違う場合があるらしいけど、検証できていないので、よく分からない。
ページが一回全部読み込まれてからのリサイズになるので、重いページはリサイズまでの時間が遅くなるので注意が必要!

この記事が気に入ったらサポートをしてみませんか?