浏览器根对象window之screen

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实现横屏或竖屏。

秒客网