HTML5 API --- Screen Orientation API简介

 

在移动平台的游戏中，我们经常需要通过倾斜或旋转移动设备来控制游戏中的元素，例如赛车游戏中我们需要左右倾斜来控制赛车的左右转向，神庙逃亡游戏中我们同样需要左右倾斜移动设备来控制人物行走位置的方向。设想一下，如果设备的倾斜让游戏画面产生旋转，游戏画面需要重绘来适应屏幕尺寸的改变，那对游戏设计者来说是个灾难，但是在Web领域没有一个API能够控制屏幕的方向，此时W3C引入的Screen Orientation API就登上了舞台。

什么是Screen Orientation API呢？

Screen Orientation API是一个能让Web开发者能控制屏幕旋转方向的API，开发者可以利用该API检测屏幕的当前方向，在屏幕方向发生改变时得到消息通知，并能通过API将屏幕方向锁定到指定状态。至写本文时，目前主流的浏览器都已经部分支持或决定支持该API，FireFox 26和IE 11都支持了lockOrientation和unlockOrientation API，Crosswalk 4（基于Chromium的Web Runtime）也支持了该API，Android上的Chrome也正在实现该API，估计2014年一季度之前能够完成。

代码示例：

 

// 锁定屏幕为竖屏模式，不能设备如何旋转，屏幕都不会切换到横屏模式。
window.screen.lockOrientation([“portrait-primary”,“portrait-secondary”]);
// 锁定屏幕为横屏模式，无能设备如何旋转，屏幕都不会切换到竖屏模式。
window.screen.lockOrientation([“landscape-primary”,“landscape-secondary”]);
// 取消屏幕的锁屏，屏幕回到原始状态，
window.screen.unlockOrientation();

 

另外需要注意的是Screen Orientation API的文档规范还处于开发阶段，浏览器的实现可能带有前缀，例如Firefox带有moz前缀，IE带有ms前缀。在使用前我们需要添加一些代码，保持更好的兼容性。

例如：

 

window.screen.lockOrientation = screen.lockOrientation ||screen.mozLockOrientation || screen.msLockOrientation;
window.screen.unlockOrientation = screen.unlockOrientation|| screen.mozUnLockOrientation || screen.msUnLockOrientation;