JavaScript 窗口屏幕


目录

    显示目录


window.screen对象包含信息 关于用户的屏幕。


窗纱

window.screen 对象可以不带 window 前缀。

特性:

  • 屏幕宽度

  • 屏幕高度

  • screen.availWidth

  • screen.availHeight

  • screen.colorDepth

  • screen.pixelDepth


窗纱宽度

screen.width 属性返回访问者屏幕的宽度 像素。

例子

显示屏幕的宽度(以像素为单位):

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

窗纱高度

screen.height 属性返回访问者屏幕的高度(以像素为单位)。

例子

显示屏幕的高度(以像素为单位):

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>


窗纱可用宽度

screen.availWidth 属性返回访问者屏幕的宽度,单位为 像素, 减去 Windows 任务栏等界面功能。

例子

显示屏幕的可用宽度(以像素为单位):

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

窗纱可用高度

screen.availHeight 属性返回访问者屏幕的高度, 以像素为单位,减去 Windows 任务栏等界面功能。

例子

显示屏幕的可用高度(以像素为单位):

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

窗纱颜色深度

screen.colorDepth 属性返回用于显示一种颜色的位数。

所有现代计算机都使用 24 位或 32 位硬件来实现颜色分辨率:

  • 24 位 = 16,777,216 种不同的“真实色彩”

  • 32 位=4,294,967,296 种不同的“深色”

较旧的计算机使用 16 位:65,536 种不同的“高色彩”分辨率。

非常旧的电脑和旧手机使用 8 位:256 种不同的“VGA 颜色”。

例子

以位为单位显示屏幕的颜色深度:

document.getElementById("demo").innerHTML = 
"Screen Color Depth: " + screen.colorDepth;

结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

HTML 中使用的 #rrggbb (rgb) 值表示“真彩色”(16,777,216 种不同的颜色)


窗口屏幕像素深度

screen.pixelDepth 属性返回屏幕的像素深度。

例子

显示屏幕的像素深度(以位为单位):

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

结果将是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

对于现代计算机,颜色深度和像素深度是相等的。