HTML5: Screen Orientation API，html5orientation

HTML5: Screen Orientation API，html5orientation

媒體查詢允許網站根據智能手機和平板的方向來調整布局。但有時候你希網站鎖定到一個特定的方向，橫屏或豎屏，此時，原生應用的格式是可以被指定的。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