苹果公司为移动 Safari 中添加了 orientationchange
事件,以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式。移动 Safari 的 window.orientation
属性中可能包含 3 个值:
相关文档中还提到一个值,即 180 表示 iPhone 头朝下;但这种模式至今尚未得到支持。
只要用户改变了设备的查看模式,就会触发 orientationchange
事件。此时的 event
对象不包含任何有价值的信息,因为唯一相关的信息可以通过 window.orientation
访问到。下面是使用这个事件的典型示例。
EventUtil.addHandler(window, 'load', function(event) {const 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
属性。
Firefox3.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 值会增大。类似地,如果设备向远离用户的方向倾斜