Тестирование аппаратной поддержки в Javascript для событий ориентации устройства iPhone 3GS

После той же проблемы, что и выше, у меня также были проблемы со старыми 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);

Я надеюсь, что это не произошло слишком поздно, но вас не расстраивает, что Safari для iOS 4.2+ будет регистрировать DeviceOrientationEvent на iPhone 3GS (или других устройствах без гироскопа)?

Вывод: DeviceOrientation не работает с iPhone 3GS. Но, как кто-то упомянул, DeviceMotionEvent работает, но вам нужно получить доступ к данным события иначе, чем с устройством с гироскопом (глупо, я знаю!).

Первый шаг: я добавил переменную в микс, чтобы определить, действительно ли OrientationEvent срабатывает с какими-либо ненулевыми данными (как это было бы, если бы был гироскоп).

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")
}

Я протестировал это в Mobile Safari для iPhone 3GS (без гироскопа) и iPad 2 (гироскоп) и Chrome на моем Macbook Pro (гироскоп). Кажется, работает.

Теперь, если вы хотите получить данные 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.

Следует отметить, что каждое событие возвращает разные числа, поэтому вам может потребоваться выполнить некоторую работу, чтобы их нормализовать. Но это основы того, как вы получаете к ним доступ.

Позвольте мне знать, если это помогает!

Хотя в 3GS нет гироскопа, он вполне способен обнаруживать изменения ориентации устройства с помощью встроенного акселерометра. iOS поддерживает эту функцию с первого iPhone.

У меня была похожая проблема, что мой рабочий стол также принял событие 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/]