HTML5: Screen Orientation API

落日映苍穹つ 2022-08-05 05:14 174阅读 0赞

媒体查询允许网站根据智能手机和平板的方向来调整布局。但有时候你希网站锁定到一个特定的方向，横屏或竖屏，此时，原生应用的格式是可以被指定的。APP只在预设格式下显示—独立于实际的设备方向。通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。  
![/images/20220805/c4738495d5ca413b81b875d181a27a09.png][http_img2.tuicool.com_mUZ3Yr.png]

### 为一个文档定义屏幕方向 ###

通过screen.orientation属性的lock()方法可以调整屏幕方向，其默认值是any，这允许设备根据其物理方向来应用任何方向。值”natural”将在设备的自然方向上显示网站，因设备而异。智能手机通常使用横屏，平板则使用竖屏。

screen.orientation.lock("natural");

上面的示例中，为设备设置自然方向。  
当然，Screen Orientation API也允许你定义一个独立的方向，其有四个值可以选择，这已经包含了移动设备所有可能的方向。这四个值分别是： “*portrait-primary*”, “*portrait-secondary*”, “*landscape-primary*”和 “*landscape-secondary*”。  
![/images/20220805/b5b0e2d5f88d4be283f86a1da0165510.png][http_img2.tuicool.com_7NZbuu.jpg]  
上图显示了所有四个值的方向： “*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][http_www.ido321.com_1572.html]**

> 本文根据@Denis Potschien的[《HTML5: Screen Orientation API Uses Javascript to Rotate the Screen》][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][HTML5_ Screen Orientation API Uses Javascript to Rotate the Screen]

[http_img2.tuicool.com_mUZ3Yr.png]: /images/20220805/c4738495d5ca413b81b875d181a27a09.png
[http_img2.tuicool.com_7NZbuu.jpg]: /images/20220805/b5b0e2d5f88d4be283f86a1da0165510.png
[http_www.ido321.com_1572.html]: http://www.ido321.com/1572.html
[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