の まとめ

デジタルガジェットレビュー、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

  関連記事

paiza.IO を使ってみた

IT/WEBエンジニア向けの転職サービス会社paiza(パイザ)が提供するpai …

【CSS】paddingとmarginの違いまとめ

paddingとmarginの違いについてまとめます。 概要 要素:文字列「サン …

【CSS】CSSで作るプルダウン/ドロップダウンメニュー

CSS初心者でも簡単に実装できるプルダウン/ドロップダウンメニューをご紹介します …

ulタグ、liタグを使った横並びメニューの作成方法

はじめに ヘッダーなどに使う横並びのメニュー。 HTMLの構造的にもulタグ、l …

素のHTML5ファイルを作成する

明日は大晦日。 新しい年に向けて、HTMLファイルをたくさん作る人もいるでしょう …