媒體查詢允許網站根據智能手機和平板的方向來調整布局。但有時候你希網站鎖定到一個特定的方向，橫屏或豎屏，此時，原生應用的格式是可以被指定的。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一起使用才能起作用，所以不應該使用它來設計網站之類的。對於需要全屏模式的瀏覽器游戲或其他應用程序，它能有更好的效果。