JavaScript

JS Screen对象(获取屏幕信息)

下文笔者讲述JavaScript中Screen对象--获取屏幕信息的简介说明,如下所示

Screen对象简介

screen对象中拥有当前计算机屏幕的信息
    如:
	  分辨率、宽度、高度等

获取screen对象的方法
    window.screen
如:
  window.screen.width可简写为screen.width

screen对象中属性

属性 备注
availTop 返回屏幕上方边界的第一个像素点(大多数情况下返回 0)
availLeft 返回屏幕左边边界的第一个像素点(大多数情况下返回 0)
availHeight 返回屏幕的高度(不包括 Windows 任务栏)
availWidth 返回屏幕的宽度(不包括 Windows 任务栏)
colorDepth 返回屏幕的颜色深度(color depth),
根据 CSSOM(CSS 对象模型)视图,为兼容起见,该值总为 24
height 返回屏幕的完整高度
pixelDepth 返回屏幕的位深度/色彩深度(bit depth)
根据 CSSOM(CSS 对象模型)视图
为兼容起见，该值总为 24
width 返回屏幕的完整宽度
orientation 返回当前屏幕的方向
例 
document.write(screen.availTop + "<br>");   // 输出：0
document.write(screen.availLeft + "<br>");  // 输出：0
document.write(screen.availHeight + "<br>");// 输出：1050
document.write(screen.availWidth + "<br>"); // 输出：1920
document.write(screen.height + "<br>");     // 输出：1080
document.write(screen.width + "<br>");      // 输出：1920
document.write(screen.colorDepth + "<br>"); // 输出：24
document.write(screen.pixelDepth + "<br>"); // 输出：24
console.log(screen.orientation);           
 // 输出：ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
例:
获取屏幕的宽度和高度 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>linux28.com-JavaScript</title>
</head>
<body>
    <button type="button" onclick="getResolution();">获取屏幕的宽度和高度</button>
    <script type="text/javascript">
        function getResolution() {
            alert("您计算机屏幕的尺寸为：" + screen.width + "x" + screen.height);
        }
    </script>
</body>
</html>
javascript之Screen对象的示例简介说明