Screen对象

Screen对象表示屏幕，提供了一些与屏幕相关的属性和方法。

Screen对象

screen.width和screen.height属性：表示屏幕的宽度和高度，以像素为单位。
screen.availWidth和screen.availHeight属性：表示可用屏幕的宽度和高度，不包括操作系统的工具栏和窗口边框等。
screen.colorDepth属性：表示屏幕的颜色深度，即每个像素可以显示的颜色数。
screen.pixelDepth属性：与colorDepth属性相同。

使用例子

例子

以下是一些使用Screen对象的例子：

获取屏幕的宽度和高度：

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

获取屏幕可用工作区的宽度和高度：

var availWidth = window.screen.availWidth;
var availHeight = window.screen.availHeight;

获取屏幕的颜色深度：

var colorDepth = window.screen.colorDepth;

获取屏幕的像素深度：

var pixelDepth = window.screen.pixelDepth;

获取显示器的物理尺寸：

var physicalWidth = window.screen.width / window.screen.deviceXDPI;
var physicalHeight = window.screen.height / window.screen.deviceYDPI;

检测是否启用了全屏模式：

var isFullScreen = window.screen.fullScreen;

获取设备的像素比例：

var pixelRatio = window.devicePixelRatio;

打开全屏模式：

if (document.documentElement.requestFullScreen) {
  document.documentElement.requestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
  document.documentElement.webkitRequestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
  document.documentElement.mozRequestFullScreen();
}

关闭全屏模式：

if (document.cancelFullScreen) {
  document.cancelFullScreen();
} else if (document.webkitCancelFullScreen) {
  document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
}

这些例子涵盖了Screen对象的常见用法，可以帮助我们获取屏幕信息、控制全屏模式等。Screen对象在Web开发中很有用，特别是在需要设计自适应的页面布局时，可以利用Screen对象来判断用户设备的屏幕尺寸，从而调整页面的布局和样式。

Screen对象 ​

使用例子 ​

Screen对象

使用例子