1. screen 1.1 availHeight/Width screen.availWidth返回瀏覽器視窗可占用的水平寬度（單位：像素）。 screen.availHeight返回瀏覽器視窗在屏幕上可占用的垂直空間，即最大高度。 1.2 availLeft/Top availTop：瀏覽器視窗 ...
1. screen
1.1 availHeight/Width
screen.availWidth返回瀏覽器視窗可占用的水平寬度（單位：像素）。
screen.availHeight返回瀏覽器視窗在屏幕上可占用的垂直空間，即最大高度。
1.2 availLeft/Top
availTop：瀏覽器視窗在屏幕上的可占用空間上邊距離屏幕上邊界的像素值。
availLeft：返回瀏覽器可用空間左邊距離屏幕（系統桌面）左邊界的距離。
大多數情況下，該屬性返回 0。
如果你在有兩個屏幕的電腦上使用該屬性，在右側屏幕計算該屬性值時，返回左側屏幕的寬度（單位：像素），也即左側屏幕左邊界的 X 坐標。
在 Windows 中，該屬性值取決於哪個屏幕被設為主屏幕，返回相對於主屏幕左邊界的 X 坐標。就是說，即使主屏幕不是左側的屏幕，它的左邊界的 X 坐標也是返回 0。如果副屏幕在主屏幕的左側，則它擁有負的 X 坐標。
[1] [2] - 左屏幕 availLeft 返回 0，右側的屏幕返回左側屏幕的寬度
[2] [1] - 左側屏幕 availLeft 返回該屏幕的 -width，右側屏幕返回 0
1.3 colorDepth
colorDepth 屬性返回目標設備或緩衝器上的調色板的比特深度。
if (screen.colorDepth<=8)
//為8位屏幕的簡單的藍色背景色
document.body.style.background="#0000FF"
else
//為現代屏幕的華麗的藍色背景色
document.body.style.background="#87CEFA"
相同的顏色在不同設備中，渲染的視覺色彩不同，可用該屬性來進行調色。
1.4 pixelDepth
返回屏幕的位深度/色彩深度（bit depth）。根據CSSOM( CSS對象模型 )視圖，為相容起見，該值總為24。
// 如果沒有足夠的位深度/色彩深度（bit depth），就選擇一個更純的顏色
if ( window.screen.pixelDepth > 8 ) {
document.style.color = "#FAEBD7";
} else {
document.style.color = "#FFFFFF";
}
1.5 width/height
height返回屏幕的高度（單位：像素）。註意，該屬性返回的高度值並不是全部對瀏覽器視窗可用。小工具（Widgets），如任務欄或其他特殊的程式視窗，可能會減少瀏覽器視窗和其他應用程式能夠利用的空間。
當返回屏幕高度時，IE 會考慮縮放設置。只有當縮放比例為 100% 時，IE 才會返回真實的屏幕高度。
width返回屏幕的寬度。註意，該屬性返回的寬度值不一定就是瀏覽器視窗可使用的寬度。當有其他小工具占據了屏幕空間時，瀏覽器有時不能占用小工具（如任務欄）占據的空間。window.screen.width 和 window.screen.availWidth 兩者不同。相關屬性 window.screen.height。
在返回該值時，IE 會考慮縮放設置。只有在縮放比例為 100% 時，IE 才返回真實的屏幕寬度。
1.6 orientation[H5]
type
表示當前屏幕是橫屏（landscape-primary）還是豎屏（portrait-primary）。只讀屬性。orientation.type還有兩個值landscape-secondary和portrait –secondary。值portrait-secondary將橫屏模式旋轉180°
var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
if (orientation.type === "landscape-primary") {
console.log("橫屏.");
} else if (orientation.type === "landscape-secondary") {
console.log("橫屏（另外一個方向。註：橫屏有兩個方向）");
} else if (orientation.type === "portrait-secondary" || orientation.type === "portrait-primary") {
console.log("豎屏");
}
angle
角度為0等同於自然方向，大部分智能手機的自然方向是portrait-primary；
90°等同於landscape-primary；
180°等同portrait-secondary；
270°等同landscape-secondary。
不同的設備，angle代表不同的關鍵字。為了獲取方向值，瀏覽器需要運行在全屏模式下。
lock/unlock
通過screen.orientation屬性的lock()方法可以調整屏幕方向，其預設值是any，這允許設備根據其物理方向來應用任何方向。值”natural”將在設備的自然方向上顯示網站，因設備而異。智能手機通常使用橫屏，平板則使用豎屏。
screen.orientation.lock("natural");
上面的示例中，為設備設置自然方向。
當然，Screen Orientation API也允許你定義一個獨立的方向，其有四個值可以選擇，這已經包含了移動設備所有可能的方向。這四個值分別是： “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。
change事件
通過change事件改變屏幕方向也是可以的，只需要調用addEventListener()為orientation屬性註冊change事件並添加一個函數（作為事件處理程式）。
screen.orientation.addEventListener("change", function(e) {
alert(screen.orientation.type + " " + screen.orientation.angle);
}, false);
每一次屏幕方向的改變都會觸發彈框，顯示當前的方向關鍵字和角度。
當使用Screen Orientation API時，還需要記住一件事：由於要Fullscreen API一起使用才能起作用，所以不應該使用它來設計網站之類的。對於需要全屏模式的瀏覽器游戲或其他應用程式，它能有更好的效果。
詳細使用方式可參見下列網站：HTML5 Screen Orientation API實現橫屏或豎屏。
