スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。
下記2点の設定が必要です。
　
　・viewport
　・回転イベント時のhtmlサイズ変更

下記例では横幅を480pxに固定したものを想定しています。

viewport設定

<meta name="viewport" content="width=480"/>

横幅の480に設定

回転時イベント

(function(){
$(window).bind("resize", function(){
    var deviceWidth = $(window).width();
    var eleWidth = 480;
    var scale = deviceWidth/eleWidth;
    $("html").css("zoom" , scale);
}).trigger("resize");
})();

回転時端末のサイズに合うように要素全体(html)の拡大・縮小をします。

このスクリプトはjquery読み込み後のヘッダに設置しておきます。そして、読み込み時にもこれを走らせて幅の調整を行いたいため、最後にtriggerイベントで強制的に動かしています。