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

公開日: : 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
  • このエントリーをはてなブックマークに追加

関連記事

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

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

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

記事を読む

【TortoiseGit】複数のリポジトリを統合する

やりたいこと 最近WindowsにTortoiseGitを導入してリポジトリを作ったり、履歴をプッ

記事を読む

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

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

記事を読む

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

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

記事を読む

【CSS】beforeのcontentで改行する

.bsample1:before{ content:"★参考★\A"; } .bsampl

記事を読む

【PHP】Twitterのツイート数やはてぶ数を取得する

指定URLのTweet数の取得 Twitterでツイート数を取得するには指定のURLにアクセスする

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

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