JS 获取浏览器窗口大小

最新推荐文章于 2024-04-19 22:20:36 发布
最新推荐文章于 2024-04-19 22:20:36 发布
阅读量718 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyodyia/article/details/8826911
版权

常用:

JS 获取浏览器窗口大小

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

 

详细:

关于获取各种浏览器可见窗口大小:  
<script>  
function getInfo()  
{  
var s = "";  
s = " 网页可见区域宽：" document.body.clientWidth;  
s = " 网页可见区域高：" document.body.clientHeight;  
s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";  
s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";  
s = " 网页正文全文宽：" document.body.scrollWidth;  
s = " 网页正文全文高：" document.body.scrollHeight;  
s = " 网页被卷去的高(ff)：" document.body.scrollTop;  
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;  
s = " 网页被卷去的左：" document.body.scrollLeft;  
s = " 网页正文部分上：" window.screenTop;  
s = " 网页正文部分左：" window.screenLeft;  
s = " 屏幕分辨率的高：" window.screen.height;  
s = " 屏幕分辨率的宽：" window.screen.width;  
s = " 屏幕可用工作区高度：" window.screen.availHeight;  
s = " 屏幕可用工作区宽度：" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";  
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";  
//alert (s);  
}  
getInfo();  
</script>  
在我本地测试当中：  
在IE、FireFox、Opera下都可以使用  
document.body.clientWidth  
document.body.clientHeight  
即可获得，很简单，很方便。  
而在公司项目当中：  
Opera仍然使用  
document.body.clientWidth  
document.body.clientHeight  
可是IE和FireFox则使用  
document.documentElement.clientWidth  
document.documentElement.clientHeight  
原来是W3C的标准在作怪啊  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
如果在页面中添加这行标记的话 在IE中：  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
在FireFox中：  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
?  
在Opera中：  
document.body.clientWidth ==> 可见区域宽度  
document.body.clientHeight ==> 可见区域高度  
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）  
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）  
而如果没有定义W3C的标准，则  
IE为：  
document.documentElement.clientWidth ==> 0  
document.documentElement.clientHeight ==> 0  
FireFox为：  
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）  
Opera为：  
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

wyodyia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取浏览器窗口大小
10-15
### JS 获取浏览器窗口大小 在前端开发中，经常需要获取浏览器窗口的大小，以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...
JS获取各种浏览器窗口大小的方法
12-09
常用:JS 获取浏览器窗口大小 代码如下:// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; ...
JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
mecho的专栏
07-02 850
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全
获取屏幕、当前网页和浏览器窗口的大小
kalman2019的博客
01-07 1690
我怎样才能获得 windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY，它们适用于所有主流浏览器?https://i.stack.imgur.com/6xPdH.png
获取浏览器可见窗口大小(转载)
11-06 581
关于获取各种浏览器可见窗口大小:  &lt;script&gt;  function getInfo()  {  var s = "";  s = " 网页可见区域宽：" document.body.clientWidth;  s = " 网页可见区域高：" document.body.clientHeight;  s = " 网页可见区域宽：" document.body.offsetWidth...
获取浏览器窗口（window）的宽高
想好了再写！
03-18 1万+
以下三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 1.对于Internet Explorer、Chrome、Firefox、Opera 、 Safari： 浏览器窗口的内部高度: window.innerHeight 浏览器窗口的内部宽度: window.innerWidth 2.对于 Internet Explorer 8、7、6、5： 浏览器窗口的内部高度: document.documentElement.clientHeight 浏览器窗口的内部宽度: d
JS获取浏览器窗口大小的方法
blog-xiaoh的博客
12-24 1320
JS获取浏览器窗口大小
js怎样获取浏览器窗口尺寸
最新发布
hexadecimal_001的博客
04-19 423
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
js 获取浏览器窗口大小
04-12
js获取浏览器窗口事件，获取改变后的大小 下载后评论可返回1分
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
10-22
主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
js遍历 子节点 子元素
热门推荐
小哈咪
03-15 1万+
js遍历 子节点 子元素   Js 节点 子元素 属性 方法    // 添加子节点前 删除所有子节点   var usernameEle = document.getElementById("username");   var childs = usernameEle.childNodes;      for(var i = childs.length - 1; i >= 0;
JS获取URL参数解析
小哈咪
01-14 6952
方法一：function getJsUrl(){var pos,str,para,parastr; var array =[]str = location.href; parastr = str.split("?")[1]; var arr = parastr.split("&");for (var i=0;iarray[arr[i].split("=")[0]]=arr[i].split("=")[1];}return array;}var req = getJsUrl();document.write(
JS+JSON 省市区 三级联动 SELECT
小哈咪
01-13 5725
<br /> <br /><script><br />//城市列表<br />var cityList={<br /> <br />"v1001":[["dd1"],["ww1"],["rr1"]],<br />"v1002":[["daad1"],["waaw1"],["raar1"]],<br /><br /> <br />"v2001":[["鼓楼区"],["白下区"],["浦口区"]],<br />"v2002":[["锡山东区"],["锡山西区"],["锡山北区"]],<br />"v2003":
backbone新手学习方法
小哈咪
08-20 2936
下面这些提示，可以让你避免我们在进行Backbone.js开发时所碰到错误： 1. 视图（Views）是数据无关的(Data-Less) 数据属于模型（models）不是视图。下次你发现 你在一个视图中存储数据(或者更糟：在DOM里)，马上把它移到model里。 如果你没有model，创建一个非常简单： this.viewStat
JavaScript检测页面是否刷新过
小哈咪
09-24 2822
不会销毁的window，帖子：页面判断问题 原帖问题：如何判断一个页面是第一次打开，还是已经刷新过的。 记得PPK的书里也讲过，即使是在网页切换的时候window对象也不会被销毁。貌似guoshuang老师比PPK先知道这个“秘密”的。看看他给出的代码： alert((window.name==""?"是":"不是")+"第一次开这个窗口！")window.name="blueide
js 树 增 减 编辑 --- 整了一个多星期才完成
小哈咪
03-31 2449
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档    #tree{ width:600px; }  #tree div{margin-left:15px; border-bottom:1px solid #CCC; heig
js 模拟 滚动条
小哈咪
02-22 2226
测试鼠标拖动效果      *{margin:0;padding:0}   .newbar{width:15px;position:absolute;bottom:0;left:0;z-index:10;border:1px solid #03F; height:30px; background:#00F; z-index:3;border:1px solid #F00;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值