deviceorientationのイベントでe.alpha, e.beta, e.gammaを取得してDOM要素を回転させようと思うのですが、
デバイスを地面に対して垂直(縦)にした時にgammma、alphaの値が一瞬おかしくなってしまいます。
厳密に言いますと、縦に近づけるほどおかしくなります。
また、水平にした時は問題なく動作しております。
他サイトで公開されているサンプルをいくつか見てみましたが、この不具合に対応しているものは見当たりませんでした。
deviceorientationの仕様でこの様な値が返ってきているのだと思いますが
何か対応策などありましたらご教授いただけますと幸いです。
下記、行なっている処理の一部です。
window.addEventListener('deviceorientation', deviceOrientationHandler, false); function deviceOrientationHandler (e) { var rotateX = e.beta; var rotateY = e.gamma; $(".test").css({ "transform": "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)" }); }
追記:
値に関しまして、例えば端末を横に回転したりせずただ垂直に持ち上げた時はbetaの値のみ変更しており
gammaの値も途中まではほぼ0の値(値が変わらない)を出していましたが、
端末の角度が80度を超えたあたりからgammaの値が急に増加し垂直状態で90となりました。
垂直を超えてさらに回転させると値が突然-90となりそこから-80,-70と値が変化していきました。