screen.availWidth 与 window.innerWidth(浏览器窗口尺寸、可用屏幕尺寸)

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

 

Window Screen 可用宽度

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

实例

返回您的屏幕的可用宽度:

<script>

document.write("可用宽度:" + screen.availWidth);

</script>

 


 

如下代码:

screen.availWidth 与 window.innerWidth(浏览器窗口尺寸、可用屏幕尺寸)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + ""

</script> 

<script>
document.write("可用宽度:" + screen.availWidth+"  可用高度:"+screen.availHeight);
</script>
</body>
</html>
screen.availWidth 与 window.innerWidth(浏览器窗口尺寸、可用屏幕尺寸)

 

对IE浏览器进行缩小放大,截图如下:

 screen.availWidth 与 window.innerWidth(浏览器窗口尺寸、可用屏幕尺寸)

550*296为浏览器内容显示尺寸

1280*990 为电脑屏幕尺寸除去底部任务栏

 

 screen.availWidth 与 window.innerWidth(浏览器窗口尺寸、可用屏幕尺寸)

730*447为浏览器内容显示尺寸

1280*990 为电脑屏幕尺寸除去底部任务栏

screen.availWidth 与 window.innerWidth(浏览器窗口尺寸、可用屏幕尺寸)

上一篇:ElementUI el-upload上传图片限制, before-upload 不生效问题


下一篇:vue disabled样式更改(checkbox input )