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

最新推荐文章于 2023-08-07 09:57:17 发布

dibengcheng6179

最新推荐文章于 2023-08-07 09:57:17 发布

阅读量890

点赞数 1

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/super-zhen/p/3530706.html

版权

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>

如下代码：

<!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>

对IE浏览器进行缩小放大，截图如下：

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

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

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

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

转载于:https://www.cnblogs.com/super-zhen/p/3530706.html

dibengcheng6179

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
screen.availWidth 与 window.innerWidth（浏览器窗口尺寸、可用屏幕尺寸）

Window 尺寸有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explore...
复制链接

扫一扫