8

我正在尝试在 Javascript 中使用 HTML5 deviceOrientation 事件来在用户围绕他旋转 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 回答 4

4

我希望这不会为时已晚，但 iOS 4.2+ 的 Safari 将在 iPhone 3GS（或其他没有陀螺仪的设备）上注册 DeviceOrientationEvent 是否令人沮丧？

底线，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")
}

我在 iPhone 3GS（无陀螺仪）和 iPad 2（陀螺仪）的 Mobile Safari 和我的 Macbook Pro（陀螺仪）上的 Chrome 上对此进行了测试。似乎工作。

现在，如果您想在方向数据不可用的情况下获取 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 设备上对其进行了测试。

应该注意，每个事件返回不同的数字，因此您可能需要做一些工作来规范它们。但这是您如何访问它们的基础知识。

让我知道这是否有帮助！

于 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 回答