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

Question

Я пытаюсь использовать события HTML5 deviceOrientation в Javascript для поворота изображения, когда пользователь поворачивает свой iPhone вокруг него.

Я использую этот код, чтобы определить, когда гироскоп двигается:

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

Это действительно хорошо работает на iPhone 4+ и IPad 2, но нет гироскопа на 3GS (и более айфоны). Вот почему я тестирую deviceOrientationSupport так:

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

Я видел этот код на многих сайтах и ​​форумах, но моя проблема заключается в том, что с моим iPhone 3GS под IOS 5.0.1, этот тест показывает мне: deviceOrientationSupport OK!

Я думаю, что этот тест проверка только если Safari способен обрабатывать эти события :(

Так что мой вопрос, можно ли добавить тест, чтобы знать, если аппаратные средства могут стрелять ориентации события?

Спасибо!

Answer 1

После того, как проблема была выше, у меня также возникли проблемы со старыми iPad/iPhones, даже не вызывающими функцию над 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); 

Answer 2

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

Answer 3

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

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

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

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

Я испытал это на мобильный 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 браузер .. . Я надеюсь. Havent тестировал его на любых устройствах Android.

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

Дайте мне знать, если это поможет!

Answer 4

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