Web前端-BOM之Screen对象

一、Screen对象简介

Screen 对象包含有关客户端显示屏幕的信息。详细文档请见：w3school之Screen对象

二、Screen对象属性

1.width、height

（1）属性介绍：

返回显示器屏幕的宽度、高度。以像素计，值为数字类型。

（2）具体演示：

<script>
  console.log(screen.width); // 返回显示屏幕的宽度
  console.log(screen.height); // 返回显示屏幕的高度
</script>

2.availWidth、availHeight

（1）属性介绍：

返回显示屏幕的宽度、高度 (除 Windows 任务栏之外)。以像素计，值为数字类型。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

（2）具体演示：

<script>
  console.log(screen.availWidth); // 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
  console.log(screen.availHeight); // 返回显示屏幕的高度 (除 Windows 任务栏之外)。
</script>

3.colorDepth

（1）属性介绍：

返回目标设备或缓冲器上的调色板的比特深度。

（2）具体演示：

<script>
  console.log(screen.colorDepth); // 返回目标设备或缓冲器上的调色板的比特深度。
</script>

4.pixelDepth

（1）属性介绍：

返回显示屏幕的颜色分辨率（比特每像素）。

（2）具体演示：

<script>
  console.log(screen.pixelDepth); // 返回显示屏幕的颜色分辨率（比特每像素）。
</script>

5.orientation

（1）属性介绍：

返回设备屏幕方向。（手机、平板等横向或纵向）

（2）具体演示：

<script>
  console.log(screen.orientation); // 返回屏幕方向
</script>

三、Screen对象描述

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。