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

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

8 голосов
/ 31 января 2012

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

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

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

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

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

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

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

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

Спасибо!

Ответы [ 4 ]

4 голосов
/ 25 марта 2012

Надеюсь, это не слишком поздно, но не разочаровывает, что 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.

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

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

3 голосов
/ 14 января 2014

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

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

0 голосов
/ 31 января 2012

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

...