HTML5: Screen Orientation API

媒体的询问取决于智能手机和平板布局调整的方向一致网站。但有时候你被锁定在一个希腊网站特定方向。横向或纵向。此时，是本机格式可以指定保健应用。

APP只显示在一个预设格式—独立于实际设备方向。通过使用HTML5的 Screen Orientation API, 能够在JavaScript定义屏幕方向。

为一个文档定义屏幕方向

通过screen.orientation属性的lock()方法能够调整屏幕方向，其默认值是any，这同意设备依据其物理方向来应用不论什么方向。

值”natural”将在设备的自然方向上显示站点，因设备而异。智能手机通常使用横屏，平板则使用竖屏。

screen.orientation.lock("natural");

上面的演示样例中，为设备设置自然方向。

当然，Screen Orientation API也同意你定义一个独立的方向。其有四个值能够选择，这已经包括了移动设备全部可能的方向。

这四个值各自是： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。



上图显示了全部四个值的方向： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。

对于智能手机，值portrait-primary和值natural是一样的。并等同于默认方向。

值portrait-secondary将横屏模式旋转180°。所以设置成设别的自然模式时，站点看起来差点儿时颠倒的。

screen.orientation.lock("portrait-primary");

相同，landscape-secondary和landscape-primary不同之处是前者将屏幕旋转了180°。

你也能够不用secondary和primary，仅适用landscape和portrait作为关键字，这将同意设备在两种方向模（portrait-primary、 portrait-secondary或landscape-primary、 landscape-secondary）式下显示。

假设想删除定义的方向，能够调用unlock()方法。

screen.orientation.unlock();

仅用于全屏模式

通过screen.orientation定义屏幕的方向有两个要求，第一：lock()方法仅在浏览器已经通过requestFullscreen()切换到全屏模式时起作用；第二：和第一点相关，因为全屏模式须要用户的许可，而不是自己主动切换，这相同适用于Screen Orientation API。

因此，对于点击事件，应该绑定这两种方法。

document.getElementById("button").addEventListener("click", function() {
  document.documentElement.requestFullScreen();
  screen.orientation.lock("portrait-primary");

 }, false);

调用lock()方法之前开启全屏模式是非常重要的。正如上面的样例。结束全屏模式将释放锁定的方向。

假设你在浏览器中打开了一个新文档。比如。当点击一个链接时，定义的方向将随着全屏模式同一时候结束。Screen Orientation API仅对当前文档有效。

读取Orientation

不能总是预先确定方向，有时你仅想知道智能手机和平板的方向。

这样的情况下。能够使用Screen Orientation API读取方向，类型属性值是显示定位的关键字之中的一个。

alert(screen.orientation.type);

使用angle属性还能够显示方向的角度

alert(screen.orientation.angle);

角度为0等同于自然方向。大部分智能手机的自然方向是portrait-primary；90°等同于landscape-primary；180°等同portrait-secondary。270°等同landscape-secondary。不同的设备，angle代表不同的关键字。

为了获取方向值，浏览器须要执行在全屏模式下。

通过change事件改变屏幕方向也是能够的，仅仅须要调用addEventListener()为orientation属性注冊change事件并加入一个函数（作为事件处理程序）。

screen.orientation.addEventListener("change", function(e) {
  alert(screen.orientation.type + " " + screen.orientation.angle);
}, false);

每一次屏幕方向的改变都会触发弹框。显示当前的方向关键字和角度。

浏览器支持

Screen Orientation API在Chrome 38+ and Opera 25+不须要私有前缀，但 API仅能在移动设备上起作用。

你能够使用一个if语句推断浏览器是否支持API

if ("orientation" in screen) {
  …
}

Screen Orientation API是非常新的API，API的早期发展阶段使用不同的方法名。

比如：使用lockOrientation()而不是lock(),使用unlockOrientation()而不是unlock(),不应该在Chrome and Opera使用这些旧的方法名。

IE 11+和Firefox 33+也支持Screen Orientation API。但须要相应的私有前缀

screen.msLockOrientation.lock("portrait-primary");
screen.mozLockOrientation.lock("portrait-primary");

在IE 11+和Firefox 33+中，检測方向变化的事件名也不同，你应该使用带相应前缀的orientationchange。而不是change.

当使用Screen Orientation API时。还须要记住一件事：因为要Fullscreen API一起使用才干起作用，所以不应该使用它来设计站点之类的。

对于须要全屏模式的浏览器游戏或其它应用程序，它能有更好的效果。

译文出处：http://www.ido321.com/1572.html

本文依据@Denis Potschien的《HTML5: Screen Orientation API Uses Javascript to Rotate the Screen》所译。整个译文带有我自己的理解与思想，假设译得不好或有不正确之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.noupe.com/design/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639.html