スマートフォンの向きで命令を出すやり方 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

スマートフォン向きが変わったときの表示方法や振る舞いを制御したいと思い検索したときのメモ。

参照したエントリー

スマートフォンの縦横の向きにあわせて表示を制御する
 jQueryでiPhone/iPadの向きを検出する

jQueryで処理するようなので、jQueryを呼び出して下記のように記述すればよいみたいです。

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

  <script type="text/javascript">
  
  $(function(){
  $(window).bind('load orientationchange resize',function(){
  if(Math.abs(window.orientation) === 90){
  $("body").html("横向き");//横向きの場合の命令
  }else{
  $("body").html("縦向き");//縦向きの場合の命令
  }
  
  })
  })
  
  </script>

縦にしたとき「縦向き」、横にしたとき「横向き」と表示されました。