幅固定サイトでのスマホ回転時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イベントで強制的に動かしています。