设备事件中orientationchange事件、MozOrientation事件、

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

智能手机和平板电脑的普及，为用户与浏览器交互引入了一种新的方式，而一类新事件也应运而生。 设备事件（device event）可以让开发人员确定用户在怎样使用设备。W3C从 2011年开始着手制定一份 关于设备事件的新草案（http://dev.w3.org/geo/api/spec-source-orientation.html），以涵盖不断增长的设备 类型并为它们定义相关的事件。本节会同时讨论这份草案中涉及的 API和特定于浏览器开发商的事件。
? ? ? ?1.orientationchange 事件?
? ? ? ?苹果公司为移动 Safari中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设 备由横向查看模式切换为纵向查看模式。移动 Safari的 window.orientation 属性中可能包含 3个值： 0 表示肖像模式，90 表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90 表示向右旋转的横向模 式（“主屏幕”按钮在左侧）。相关文档中还提到一个值，即 180 表示 iPhone头朝下；但这种模式至今 尚未得到支持。如图展示了 window.orientation 的每个值的含义。

? ? ? ?只要用户改变了设备的查看模式，就会触发 orientationchange 事件。此时的 event 对象不包 含任何有价值的信息，因为唯一相关的信息可以通过 window.orientation 访问到。下面是使用这个 事件的典型示例。?
? ? ? ? var div = document.getElementById("myDiv");
? ? ? ?div.innerHTML = "Current orientation is " + window.orientation;?
? ? ? ?EventUtil.addHandler(window, "orientationchange", function(event){
? ? ? ? ? ? ? div.innerHTML = "Current orientation is " + window.orientation;
? ? ? ? ? ? ? });
? ? ? ?});?
? ? ? ?在这个例子中，当触发 load 事件时会显示初的方向信息。然后，添加了处理 orientationchange 事件的处理程序。只要发生这个事件，就会有表示新方向的信息更新页面中的消息。?
? ? ? ?所有 iOS设备都支持 orientationchange 事件和 window.orientation 属性。?
? ? ? ?由于可以将 orientationchange 看成 window 事件，所以也可以通过指定 元素的 onorientationchange 特性来指定事件处理程序。?
? ? ? ?2.MozOrientation 事件
? ? ? ? Firefox 3.6为检测设备的方向引入了一个名为 MozOrientation 的新事件。（前缀 Moz 表示这是特 定于浏览器开发商的事件，不是标准事件。）当设备的加速计检测到设备方向改变时，就会触发这个事 件。但这个事件与 iOS中的 orientationchange 事件不同，该事件只能提供一个平面的方向变化。由 于 MozOrientation 事件是在 window 对象上触发的，所以可以使用以下代码来处理。?
? ? ? ?EventUtil.addHandler(window, "MozOrientation", function(event){ //响应事件 });?
? ? ? ?此时的 event 对象包含三个属性：x、y 和 z。这几个属性的值都介于 1到-1之间，表示不同坐标 轴上的方向。在静止状态下，x 值为 0，y 值为 0，z 值为 1（表示设备处于竖直状态）。如果设备向右倾 斜，x 值会减小；反之，向左倾斜，x 值会增大。类似地，如果设备向远离用户的方向倾斜，y 值会减 小，向接近用户的方向倾斜，y 值会增大。z 轴检测垂直加速度度，1 表示静止不动，在设备移动时值 会减小。（失重状态下值为 0。）以下是输出这三个值的一个简单的例子。?
? ? ? ?EventUtil.addHandler(window, "MozOrientation", function(event){?
? ? ? ? ? ? ? var output = document.getElementById("output");?
? ? ? ? ? ? ? output.innerHTML = "X=" + event.x + ", Y=" + event.y + ", Z=" + event.z +"
";?
? ? ? ?});?
? ? ? ?只有带加速计的设备才支持 MozOrientation 事件，包括 Macbook、Lenovo Thinkpad、Windows Mobile和 Android设备。请大家注意，这是一个实验性 API，将来可能会变（可能会被其他事件取代）。
? ? ? ?3.deviceorientation 事件?
? ? ? ?本质上，DeviceOrientation Event规范定义的 deviceorientation 事件与 MozOrientation 事件类 似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件 相同的支持限制。不过，deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。
? ? ? ?设备在三维空间中是靠 x、y和 z轴来定位的。当设备静止放在水平表面上时，这三个值都是 0。x 轴方向是从左往右，y轴方向是从下往上，z轴方向是从后往前（如图所示）。?

? ? ? ?触发 deviceorientation 事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。事件对象包含以下 5个属性。?
? ? ? ?alpha：在围绕 z轴旋转时（即左右旋转时），y轴的度数差；是一个介于0到 360之间的浮点数。
? ? ? ?beta：在围绕 x轴旋转时（即前后旋转时）， z轴的度数差；是一个介于?180到180之间的浮点数。 ? ? ? ?
? ? ? ?gamma：在围绕y轴旋转时（即扭转设备时），z轴的度数差；是一个介于?90到90之间的浮点数。 ? ? ? ?
? ? ? ?absolute：布尔值，表示设备是否返回一个绝对值。?
? ? ? ?compassCalibrated：布尔值，表示设备的指南针是否校准过。 如图是 alpha、beta 和 gamma 值含义的示意图。?
? ? ? ?下面是一个输出 alpha、beta 和 gamma 值的例子。?
? ? ? ?EventUtil.addHandler(window, "deviceorientation", function(event){?
? ? ? ?var output = document.getElementById("output");?
? ? ? ?output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta + ", Gamma=" + event.gamma + "
";
? ? ? ? });?
? ? ? ?通过这些信息，可以响应设备的方向，重新排列或修改屏幕上的元素。要响应设备方向的改变而旋 转元素，可以参考如下代码。 ? ? ? ??
? ? ? ?EventUtil.addHandler(window, "deviceorientation", function(event){?
? ? ? ? ? ? ? ?var arrow = document.getElementById("arrow");
? ? ? ? ? ? ? ?arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";?

? ? ? ?});

? ? ? ?这个例子只能在移动 WebKit 浏览器中运行，因为它使用了专有的 webkitTransform 属性（即 CSS 标准属性 transform 的临时版）。元素“arrow”会随着 event.alpha 值的变化而旋转，给人一种指南 针的感觉。为了保证旋转平滑，这里的 CSS3变换使用了舍入之后的值。
? ? ? ? 到 2011年，支持 deviceorientation 事件的浏览器有 iOS 4.2+中的 Safari、Chrome和 Android版 WebKit。
? ? ? ?4.devicemotion 事件?
? ? ? ?DeviceOrientation Event 规范还定义了一个 devicemotion 事件。这个事件是要告诉开发人员设备 什么时候移动，而不仅仅是设备方向如何改变。例如，通过 devicemotion 能够检测到设备是不是正在 往下掉，或者是不是被走着的人拿在手里。?
? ? ? ?触发 devicemotion 事件时，事件对象包含以下属性。 ??
? ? ? ?acceleration：一个包含 x、y 和 z 属性的对象，在不考虑重力的情况下，告诉你在每个方向 上的加速度。 ??
? ? ? ?accelerationIncludingGravity：一个包含 x、y 和 z 属性的对象，在考虑 z 轴自然重力加 速度的情况下，告诉你在每个方向上的加速度。 ??
? ? ? ?interval：以毫秒表示的时间值，必须在另一个 devicemotion 事件触发前传入。这个值在每 个事件中应该是一个常量。?
? ? ? rotationRate：一个包含表示方向的 alpha、beta 和 gamma 属性的对象。 如果读取不到 acceleration、accelerationIncludingGravity 和 rotationRate 值，则它们 的值为 null。因此，在使用这三个属性之前，应该先检测确定它们的值不是 null。例如：?
? ? ? ?EventUtil.addHandler(window, "devicemotion", function(event){?
? ? ? ? ? ? ? var output = document.getElementById("output");
? ? ? ? ? ? ? ?if (event.rotationRate !== null){?
? ? ? ? ? ? ? ? ? ? ?output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" + event.rotationRate.beta + ", Gamma=" + event.rotationRate.gamma;?
? ? ? ? ? ? ? }
? ? ? ? });?
与 deviceorientation 事件类似，只有 iOS 4.2+中的 Safari、Chrome和 Android版 WebKit 实现了 devicemotion 事件。
南昌APP开发公司工程师提供下完整实例代码，代码如下：



? ? ? ?


? ? ? ?

This example only works in Chrome in devices such as Macbooks, Thinkpads, or Android, or on Safari for iOS 4.2+.

? 本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-网络http://www.huicuiwang.cn/如转载请注明出处!