2017年5月25日(木)
スマホの回転イベント #HTML5&CSS3&JavaScript Javascriptで、スマホの回転イベントを検知できる。
【回転イベント】
・window.onorientationchange
【回転のパラメータ】
・window.orientation
[0] [90] [-90] [180]
※ブラウザによっては逆さ表示が無く、その場合[180]は表示されない。
※回転が無いパソコンでは、[undefined]未定義となる。
下記に示すように、オーソドックスな記述でプログラミングしてみた。（回転以外の記述は省略）
-- orientation.html --
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
window.onload = _input;
window.onorientationchange = _input;
function _input(){
document.forms[0].orientation.value = window.orientation;
}
</script>
</head>
<body>
<form>
<p>window.orientation:<br>
<input type="text" name="orientation"></p>
</form>
</body>
</html>
--
P.S. window.parent.screen.widthと.heightは、あくまでもデバイスのサイズ。window.innerWidthと.innerHeightは、縦置きと横置きで変化する。
http://neconote.jp/php/orientation.html
お問い合わせ