deviceorientation事件的w3c标准:
http://w3c.github.io/deviceorientation/spec-source-orientation.html#deviceorientation
W3C标准描述了当设备围绕其z轴旋转时,该事件的alpha属性应该如何改变。
当您直视屏幕时,将手机放在您面前时,z轴指向您。它是与屏幕重合的平面的法线向量。
在我看来,我的Windows手机上的东西略有不同(=烦人)。 alpha属性也会随着围绕x轴的旋转而改变(在portait模式中)。
如何重复:
请注意,当伽玛变为正值时,alpha值会跳跃180度。这在W3C标准中没有描述,或者我错过了什么?
-
当您进入横向模式时会发生另一件奇怪的事情。在横向模式下将手机绕z轴倾斜时,不是alpha属性,但beta属性似乎有变化?!要在横向模式下更改alpha属性,您必须绕着它(原始)x轴转动手机,例如,这意味着转动手机的顶部(现在位于左侧,就像你在景观模式)远离你。
-
目前我还没有安装Android或iOS设备,但至少Chrome桌面浏览器中的模拟器表现完全不同(似乎与W3C标准一致)。
-
我在这里放了一个简单的测试脚本:
http://locaboa.com/wpdotest.html
(在智能手机上打开)
-
我做错了什么/遗失了什么?
有关如何纠正此问题的任何想法?
=======================
编辑:刚刚在iPhone上测试过,似乎与windows手机的行为方式相同......
答案 0 :(得分:0)
答案:他们已经再次完成了。
现在大多数CSS和JS已经标准化了polyfilled,大型浏览器和操作系统供应商决定采用不同的处理方式并将设备方向数据传递给Web开发人员。此外,标准不是密闭的。
我发现了这个:
https://github.com/ajfisher/deviceapi-normaliser
这是不同供应商应用程序之间差异的非常有用的总结,但(不幸的是)不是有效的polyfill。对于我的项目,我正在慢慢填充空白,并期望在几个月内达到完全填充。与此同时,这是一个将WP IE坐标转换为工作偏航/俯仰/滚动坐标集的脚本。
// [[PITCH]]
if ( event.gamma < 0 ) {
normalized.pitch = -90 - event.gamma ;
} else {
normalized.pitch = 90 - event.gamma ;
}
// [[YAW]]
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;
}
// [[ROLL]]
if ( normalized.pitch > 0 ) {
var sign = Math.abs( event.beta ) / event.beta;
normalized.roll = sign * 180 - event.beta ;
}