8-16 屏幕可用高和宽度
本节编程练习不计算学习进度,请电脑登录imooc.com操作

屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。

注意:

不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度,代码如下:

<script type="text/javascript">
document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>

注意:根据屏幕的不同显示值不同。

 

 

 

任务

使用window.screen对象,完成下面任务,看看你的屏幕可用大小:
补充右边编辑器第9行,输出屏幕可用宽度
补充右边编辑器第10行,输出屏幕可用高度
注意: 大家可以把任务栏的位置和大小改变下,看看获取的值有什么区别。

 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>屏幕分辨率的高和宽</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. document.write("可用宽度:" );
  10. document.write("可用高度:" );
  11. </script>
  12. </body>
  13. </html>
下一节