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

公開日: : JavaScript/jQuery, サイト制作

スポンサーリンク

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

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

かわいい女の子のアイコンやアバター画像を作れるサイト

TwitterやFacebookなどでアイコンが欲しくなることってあるかと思います。私も色々検索して

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

Pocketのソーシャルボタンをブログ・サイトに設置する方法

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑