の まとめ

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

  関連記事

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …

no image
CSSに関する超個人的なメモ

CSSに関する個人的なメモです。 何回も確認したり、よく使うコードをメモしておき …

no image
【JavaScript】getElementByIdでゲットした値を数値にするにはparseIntを使う

JavaScriptの個人的なメモです。 getElementByIdでゲットし …

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

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

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

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