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

Question

设备方向事件的 w3c 标准：

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

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

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

在我看来，Windows 手机上的工作方式略有不同（= 令人讨厌）。 alpha 属性也随着围绕 x 轴的旋转而变化（即在纵向模式下）。

如何重复：

1. 在你面前举起手机（在肖像模式下）。
2. 确保 gamma 为负值，这意味着手机略微向后倾斜。
3. 现在确保 alpha 约为。零度意味着手机以 y 轴为中心。
4. 将手机稍微向左倾斜，使 alpha 大约 30 度，同时确保 gamma 保持负值。
5. 现在将手机稍微转向您，使伽玛为正

请注意，当 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 已经标准化为 polyfill，大型浏览器和操作系统供应商已决定实施不同的方式来处理设备方向数据并将其传递给 Web 开发人员。此外，该标准也不是无懈可击的。

我发现了这个：

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

这是对不同供应商应用程序之间差异的非常有用的总结，但（不幸的是）不是一个有效的 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 ;

    }