の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【Webアプリ】iPhoneで画面の向きを検知したい|スマホの傾きを検知して表示する方法

      2015/02/15

Webページでスマホの傾きを検知する方法を紹介します。

手順

1.HEADタグ内に次の内容を記述します。

<script type = "text/javascript">
//傾き検知
function updateOrientation(){
var orientation=window.orientation;
document.getElementById("currentOrientation").innerHTML=""+orientation+"度です";
}
//関数を呼び出し
window.onorientationchange=updateOrientation;
</script>

2.BODYタグ内に次の内容を記述します。

<div id="currentOrientation">iPhoneの角度を変えてみてください</div>

結果

iPhoneでアクセスすると次の画面が表示されます。

2014-09-20_1

 

90度傾けます。

2014-09-20_2

戻します。

2014-09-20_4

逆の90度です。

2014-09-20_3

まとめ

実際に確認したい場合は下記のサンプルを使ってください。

サンプル:http://bgah.jp/memo/iPhone_p/sample/rotation.htm

参考

MacFan2009年2月号160P:http://macfan.jp/magazine/200812/rensai/index.html#r16

 - JS,PHP,CSS , , , ,

336-280

  関連記事

no image
【JavaScript】functionでリロードする方法

用途 ボタンをクリックしたらリロードしたい、ある一定時間が経過したらWebページ …

段組
【CSS】段組レイアウトの基礎・サンプル付き

CSSによる段組レイアウトの基礎とサンプルです。 段組レイアウトサンプル サンプ …

【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bx …

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズ …

解像度
Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度を調べる方法

商標登録するイメージファイルを作る必要がありjpgファイルにdpiを指定すること …