Soporte de hardware de prueba en Javascript para eventos de orientación del dispositivo del iPhone 3GS

Question

Estoy tratando de usar eventos HTML5 DeviceOrientation en Javascript para rotar una imagen cuando el usuario gira su iPhone a su alrededor.

que utiliza este código para detectar cuando el giroscopio se está moviendo:

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

Realmente funciona bien en el iPhone 4+ y el iPad 2, pero no hay giroscopio en el 3GS (y los más antiguos iPhones). Es por eso que estoy probando el deviceOrientationSupport así:

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

que he visto este código en muchos sitios web o foros, pero mi problema es que con mi iPhone 3GS bajo IOS 5.0.1, esta prueba me indica: deviceOrientationSupport ¡OK!

creo que esta comprobación de prueba solamente si Safari es capaz de manejar estos eventos :(

Así que mi pregunta es, es posible añadir una prueba para saber si el hardware puede disparar eventos de orientación?

Gracias!

Answer 1

Después de tener el mismo problema que el anterior, también tuve problemas con los iPad/iPhones anteriores que ni siquiera llamaban a la función en addEventListener.

Así que descubrí que lo siguiente funcionó mucho mejor para mí y eliminó cualquier posibilidad de que un dispositivo no compatible se transfiriera (esto estaba saturado con una pantalla de carga por lo que requería un intervalo antes de completar su prueba completa.)

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

Si bien no hay giroscopio en el 3GS, es perfectamente capaz de detectar la orientación del dispositivo usando sólo cambia el acelerómetro se ha de construir en. iOS ha tenido este apoyo desde el primer iPhone.

Answer 3

Espero que esto no te llegue demasiado tarde, pero ¿no es frustrante que Safari para iOS 4.2+ registre DeviceOrientationEvent en un iPhone 3GS (u otros dispositivos sin giroscopio)?

Conclusión, DeviceOrientation no funciona con el iPhone 3GS. Pero como alguien mencionó, DeviceMotionEvent funciona, pero tienes que acceder a los datos del evento de una manera diferente a como lo harías con un dispositivo con un giroscopio (¡qué tonto lo sé!).

Primer paso: Agregué una variable en la mezcla para capturar si el OrientationEvent estaba o no disparando datos no nulos (como lo haría si hubiera un giroscopio).

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 
} 

¡Ahora ya sabes si el evento en realidad tiene datos de giroscopio o no! Por lo tanto, si desea usar otra cosa de manera predeterminada (es decir, window.DeviceMotionEvent), puede usar un condicional.

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

He probado esto en Safari Mobile para iPhone 3GS (sin giroscopio) y iPad 2 (giroscopio) y Chrome en mi Macbook Pro (giroscopio). Parece funcionar.

Ahora, si desea obtener los datos DeviceMotionEvent como alternativa, si los datos de orientación no está disponible, entonces ...

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

Esto debería cubrir sus bases para la mayoría de dispositivos con un navegador WebKit .. . Espero. Havent lo probó en cualquier dispositivo Android.

Cabe señalar que cada evento devuelve números diferentes, por lo que es posible que deba hacer algún trabajo para normalizarlos. Pero estos son los conceptos básicos de cómo acceder a ellos.

¡Avíseme si esto es útil!

Answer 4

Tuve un problema similar que mi Escritorio también aceptó el evento window.DeviceOrientationEvent. He utilizado el siguiente código para comprobar el apoyo de orientación en los dispositivos móviles:

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/]