媒體查詢允許網站根據智能手機和平闆的方向來調整布局。但有時候你希網站鎖定到一個特定的方向，橫屏或豎屏，此時，原生應用的格式是可以被指定的。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”。
vc/yo7ogjmxkcxvvozxlbt5wb3j0cmfpdc1wcmltyxj5pc9lbt4mcmrxdw87lcambgrxdw87pgvtpnbvcnryywl0lxnly29uzgfyetwvzw0+jnjkcxvvoywgjmxkcxvvozxlbt5syw5kc2nhcgutchjpbwfyetwvzw0+jnjkcxvvo7rniczszhf1bzs8zw0+bgfuzhnjyxbllxnly29uzgfyetwvzw0+jnjkcxvvo6gjpgjyic8+dqq21npa1sfe3mrwu/qjrna1cg9ydhjhaxqtchjpbwfyebrn1rvuyxr1cmfsysfsu9h5tcsjrlkitcjnrnpaxkziz7e9z/kho9a1cg9ydhjhaxqtc2vjb25kyxj5vau64cbbxkpkvdd916oxodamzgvno6osy/ns1mno1sozycnosfc1xnfuylveo8q9yrgjrm341b6/tmbwwls8ulr1yrg137w5tcshozwvcd4ncjxwcmugy2xhc3m9"brush:java;">
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一起使用才能起作用，是以不應該使用它來設計網站之類的。對于需要全屏模式的浏覽器遊戲或其他應用程式，它能有更好的效果。