スマホサイトをブラウザサイズにあわせる方法
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で挙動が違う場合があるらしいけど、検証できていないので、よく分からない。
ページが一回全部読み込まれてからのリサイズになるので、重いページはリサイズまでの時間が遅くなるので注意が必要!
この記事が気に入ったらサポートをしてみませんか?