8

ユーザーがiPhoneを自分の周りで回転させたときに、JavascriptでHTML5deviceOrientationイベントを使用して画像を回転させようとしています。

このコードを使用して、ジャイロスコープが動いていることを検出します。

window.addEventListener('deviceorientation', function (e) {
    alpha = e.alpha;
    beta = e.beta;
    gamma = e.gamma;            
}, true);

iPhone4+とiPad2で本当にうまく機能しますが、3GS（および古いiPhone）にはジャイロスコープはありません。そのため、私は次のようにdeviceOrientationSupportをテストしています。

if(window.DeviceOrientationEvent){ // gyroscope support
    alert('DeviceOrientationEvent support OK');
} else {
    alert('DeviceOrientationEvent support KO');
}

私は多くのウェブサイトやフォーラムでこのコードを見てきましたが、私の問題は、IOS5.0.1でのiPhone3GSで、このテストが私を示していることです：deviceOrientationSupport OK！

このテストは、Safariがこれらのイベントを処理できる場合にのみチェックすると思います:(

だから私の質問は、ハードウェアがオリエンテーションイベントを発生させることができるかどうかを知るためのテストを追加することは可能ですか？

ありがとう ！

4

4 に答える 4

4

これが遅すぎないことを願っていますが、iOS 4.2+ の Safari が iPhone 3GS (またはジャイロスコープのない他のデバイス) で DeviceOrientationEvent を登録するのはイライラしませんか?

要するに、DeviceOrientation は iPhone 3GS では機能しません。しかし、誰かが言ったように、DeviceMotionEvent は機能しますが、ジャイロスコープを備えたデバイスの場合とは異なる方法でイベント データにアクセスする必要があります (ばかげたことです!)。

最初のステップ: ミックスに変数を追加して、OrientationEvent が実際に null 以外のデータで発火しているかどうかをキャプチャします (ジャイロスコープがある場合と同様)。

var canHandleOrientation;
if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", handleOrientation, false);
}

function handleOrientation(event){
  console.log("Orientation:" + event.alpha + ", " + event.beta + ", " + event.gamma);
  canHandleOrientation = event; // will be either null or with event data
}

これで、イベントに実際にジャイロスコープ データがあるかどうかがわかります。したがって、デフォルトを別のもの (つまり、window.DeviceMotionEvent) にしたい場合は、条件を使用できます。

if (!canHandleOrientation) {
  console.log("There is no gyroscope")
}

iPhone 3GS (ジャイロスコープなし) と iPad 2 (ジャイロスコープ) の Mobile Safari、および Macbook Pro (ジャイロスコープ) の Chrome でこれをテストしました。うまくいくようです。

ここで、Orientation データが利用できない場合に代わりに DeviceMotionEvent データを取得したい場合は...

if (window.DeviceMotionEvent && !canHandleOrientation) {
  window.addEventListener('devicemotion', handleMotion, false);
}

function handleMotion(event){
  if(event.acceleration){
    //requires a gyroscope to work.
    console.log("Motion Acceleration: " +  event.acceleration.x + ", " +  event.acceleration.y + ", " +  event.acceleration.z);
  }
  else{
    //this is for iPhone 3GS or a device with no gyroscope, and includes gravity.
    console.log("Motion AccelerationGravity: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z);
  }
}

これは、Webkit ブラウザーを備えたほとんどのデバイスのベースをカバーするはずです...願っています。Android デバイスでテストしたことはありません。

各イベントは異なる数値を返すため、それらを正規化するために何らかの作業が必要になる場合があることに注意してください。しかし、これはアクセス方法の基本です。

これが役立つかどうか教えてください！

于 2012-03-25T00:25:15.150 に答える
3

上記と同じ問題が発生した後、古い iPad/iPhone で addEventListener の関数を呼び出さないという問題もありました。

そのため、次の方法が私にとってははるかにうまく機能し、サポートされていないデバイスが通過する可能性を排除したことがわかりました（これはロード画面で座っていたので、完全なテストを完了する前に間隔が必要でした。すべての人にとってではありません）.

var _i = null;
var _e = null;
var _c = 0;

var updateDegree = function(e){
    _e = e;
}

window.addEventListener('deviceorientation', updateDegree, false);

//  Check event support
_i = window.setInterval(function(){
    if(_e !== null && _e.alpha !== null){
        // Clear interval
        clearInterval(_i);
        // > Run app
    }else{
        _c++;
        if(_c === 10){
            // Clear interval
            clearInterval(_i);
            // > Redirect
        }
    }
}, 200);
于 2014-01-14T15:24:43.120 に答える
0

3GSにはジャイロスコープはありませんが、内蔵の加速度計を使用してデバイスの向きの変化を完全に検出できます。iOSは最初のiPhoneからこのサポートを受けています。

于 2012-01-31T11:07:05.067 に答える
0

私のデスクトップもwindow.DeviceOrientationEventイベントを受け入れるという同様の問題がありました。次のコードを使用して、モバイル デバイスでの向きのサポートを確認しました。

var deviceSupportOrientation = false;
window.onload = function() {
    if (window.DeviceOrientationEvent) {
        window.addEventListener("deviceorientation", function() {
            deviceSupportOrientation = true;
            window.removeEventListener('deviceorientation');
        }, false);
    }
};

JSFiddle: http://jsfiddle.net/7L5mg8hj/1/]

于 2015-06-04T14:53:00.390 に答える