概述

Screen 对象包含有关客户端显示屏幕的信息。

可以通过window.screen进行访问。

语法

// availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。
window.screen.availHeight

// availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。
window.screen.availWidth

// colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。
window.screen.colorDepth

// height 属性声明了显示浏览器的屏幕的高度，以像素计。
window.screen.height

// pixelDepth 属性返回显示屏幕的颜色分辨率（比特每像素）。
window.screen.pixelDepth

// width 属性声明了显示浏览器的屏幕的宽度，以像素计。
window.screen.width

Screen 对象属性

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
	</head>
	<body>
		<button type="button" οnclick="getAvailHeight()">返回屏幕的高度（不包括Windows任务栏）</button>
		<button type="button" οnclick="getAvailWidth()">返回屏幕的宽度（不包括Windows任务栏）</button>
		<button type="button" οnclick="getColorDepth()">返回目标设备或缓冲器上的调色板的比特深度</button>
		<button type="button" οnclick="getHeight()">返回屏幕的总高度</button>
		<button type="button" οnclick="getPixelDepth()">返回屏幕的颜色分辨率（每象素的位数）</button>
		<button type="button" οnclick="getWidth()">返回屏幕的总宽度</button>

		<script type="text/javascript">
			function getAvailHeight() {
				// availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。
				// 注意,不包括屏幕底部的任务栏的高度
				alert(window.screen.availHeight);
			}

			function getAvailWidth() {
				// availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。
				alert(window.screen.availWidth);
			}

			function getColorDepth() {
				// colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。
				alert(window.screen.colorDepth);
			}

			function getHeight() {
				// height 属性声明了显示浏览器的屏幕的高度，以像素计。
				alert(window.screen.height);
			}

			function getPixelDepth() {
				// pixelDepth 属性返回显示屏幕的颜色分辨率（比特每像素）。
				alert(window.screen.pixelDepth);
			}

			function getWidth() {
				// width 属性声明了显示浏览器的屏幕的宽度，以像素计。
				alert(window.screen.width);
			}
		</script>
	</body>
</html>

来源：CSDN

作者：二木成林

链接：https://blog.csdn.net/cnds123321/article/details/104143910

标签

像素

JavaScript中Browser之Screen 对象

概述

语法

Screen 对象属性

示例