javascript - 谁了解 Windows Phone 上的设备方向？

Question

deviceorientation 事件的 w3c 标准:

http://w3c.github.io/deviceorientation/spec-source-orientation.html#deviceorientation

W3C 标准描述了当设备绕其 z 轴旋转时此事件的 alpha 属性应如何变化。

当您将手机放在您面前并直视手机屏幕时，Z 轴指向您。它是与屏幕重合的平面的法向量。

在我看来，我的 Windows Phone 上的工作方式略有不同(=令人烦恼)。 alpha 属性也会随着绕 x 轴的旋转而变化(即在肖像模式下)。

如何重复:

1. 将手机放在您面前(纵向模式)。
2. 确保 Gamma 值为负，这意味着手机稍微向后倾斜。
3. 现在确保 alpha 约为。 0 度表示手机以 y 轴为中心。
4. 将手机稍微向左倾斜，使 alpha 大约为 30 度，同时确保 gamma 保持为负值。
5. 现在将手机稍微转向您，使 Gamma 呈正值

请注意，当 gamma 变为正值时，alpha 值会跳跃 180 度。 W3C 标准中没有对此进行描述，还是我错过了什么？

-

当你进入横向模式时，会发生另一件奇怪的事情。当在横向模式下围绕 z 轴倾斜手机时，alpha 属性似乎没有改变，但 beta 属性似乎发生了变化？!要在横向模式下更改 alpha 属性，您必须围绕其(原始)x 轴转动手机，这意味着转动手机的顶部(现在位于左侧，就像您在横向模式)远离您。

-

我目前没有可供使用的 Android 或 iOS 设备，但至少 Chrome 桌面浏览器中的模拟器的行为完全不同(并且似乎符合 W3C 标准)。

-

我在这里放置了一个简单的测试脚本:

http://locaboa.com/wpdotest.html

(在智能手机上打开它)

-

我做错了什么/遗漏了什么吗？

关于如何纠正这个问题有什么想法吗？

========================

编辑:刚刚在 iPhone 上测试过，似乎与 Windows Phone 的行为方式相同...

Answer 1

答案:他们又这么做了。

现在，大多数 CSS 和 JS 已经实现了 Polyfilled 标准化，大型浏览器和操作系统 vendor 已决定实现不同的方式来处理设备方向数据并将其传递给 Web 开发人员。此外，该标准也不是密不透风的。

我发现了这个:

https://github.com/ajfisher/deviceapi-normaliser

这是对不同 vendor 应用程序之间差异的非常有用的总结，但(不幸的是)不是一个有效的polyfill。对于我的项目，我正在慢慢填补空白，并期望在几个月内达到完整的 Polyfill。同时，这里有一个脚本，可将 WP IE 坐标转换为工作偏航/俯仰/滚动坐标集。

//[[ 音调 ]]

    if ( event.gamma < 0 ) {

        normalized.pitch = -90 - event.gamma ;

    } else {

        normalized.pitch = 90 - event.gamma ;

    }

//[[ 偏航 ]]

    if ( normalized.pitch > 0 && event.alpha > 180 ) {

        normalized.yaw = event.alpha - 180 ;

    } else if ( normalized.pitch > 0 && event.alpha < 180 ) {

        normalized.yaw = event.alpha + 180;

    }

//[[ 滚动 ]]

    if ( normalized.pitch > 0 ) {

        var sign = Math.abs( event.beta ) / event.beta;

        normalized.roll = sign * 180 - event.beta ;

    }