javascript获取浏览器宽度和高度

最新推荐文章于 2023-10-29 09:49:46 发布
最新推荐文章于 2023-10-29 09:49:46 发布
阅读量6.7k 收藏 2
点赞数
分类专栏： HTML+CSS+JS/JQUERY
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bravezhe/article/details/9048459
版权

测试浏览器及版本：IE8、FF5、Chrome12

屏幕分辨率：1366 x 768

文档声明：<!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">

 

1.获取屏幕分辨率（所有浏览器一致）：

屏幕横向分辨率：window.screen.width   1366

屏幕纵向分辨率：window.screen.height   768

 

2.网页可见区域宽度和高度

宽度：document.body.clientWidth

高度：document.body.clientHeight

 

有文档声明时：宽度为网页可见区域高度，高度可能小于可见区高度

无文档声明时：宽度为网页可见区域高度，高度大于等于可见区高度

 

3.屏幕可用工作区域宽度和高度

宽度：window.screen.availWidth   屏幕横向分辨率-任务栏宽度（如果任务栏在左侧或右侧）

高度：window.screen.availHeight  屏幕纵向分辨率-任务栏高度（如果任务栏在顶部或底部）

 

4网页正文宽度和高度

宽度：document.body.scrollWidth

高度：document.body.scrollHeight

 

有文档声明：IE8和FF5高度可能小于可见区域高度，Chrome12大于等于可见区域高度

无文档声明：IE8高度可能小于可见区域高度，FF5和Chrome12大于等于可见区域高度

 

5.网页可见区域宽度和高度（包括边线)

宽度：document.body.offsetWidth

高度：document.body.offsetHeight

 

有文档声明：全部可能小于可见区域高

无文档声明：FF5高度可能小于可见区域高度，IE8和Chrome12大于等于可见区域高度

 

有文档声明的测试代码：

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>测试1</title>  
  6. <script type="text/javascript">  
  7. function show(){  
  8.     var s = "";  
  9.     s += "网页可见区域宽度："+document.body.clientWidth;  
  10.     s += "\n网页可见区域高度："+document.body.clientHeight;  
  11.     s += "\n网页可见区域宽度（包括边线）："+document.body.offsetWidth;  
  12.     s += "\n网页可见区域高度（包括边线）："+document.body.offsetHeight;  
  13.     s += "\n网页正文宽度："+document.body.scrollWidth;  
  14.     s += "\n网页正文高度："+document.body.scrollHeight;  
  15.     s += "\n屏幕可用工作区域宽度："+window.screen.availWidth;  
  16.     s += "\n屏幕可用工作区域高度："+window.screen.availHeight;  
  17.     s += "\n屏幕分辨率宽度："+window.screen.width;  
  18.     s += "\n屏幕分辨率高度："+window.screen.height;  
  19.     alert(s);  
  20. }  
  21. </script>  
  22. </head>  
  23.   
  24. <body style="margin:0;border:0">  
  25. <div style="width:2000px;height:90px;margin:0">  
  26. <a onclick="show()" href="#">点击</a>  
  27. </div>  
  28. </body>  
  29. </html>  

 

无文档声明的测试代码

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>测试2</title>  
  5. <script type="text/javascript">  
  6. function show(){  
  7.     var s = "";  
  8.     s += "网页可见区域宽度："+document.body.clientWidth;  
  9.     s += "\n网页可见区域高度："+document.body.clientHeight;  
  10.     s += "\n网页可见区域宽度（包括边线）："+document.body.offsetWidth;  
  11.     s += "\n网页可见区域高度（包括边线）："+document.body.offsetHeight;  
  12.     s += "\n网页正文宽度："+document.body.scrollWidth;  
  13.     s += "\n网页正文高度："+document.body.scrollHeight;  
  14.     s += "\n屏幕可用工作区域宽度："+window.screen.availWidth;  
  15.     s += "\n屏幕可用工作区域高度："+window.screen.availHeight;  
  16.     s += "\n屏幕分辨率宽度："+window.screen.width;  
  17.     s += "\n屏幕分辨率高度："+window.screen.height;  
  18.     alert(s);  
  19. }  
  20. </script>  
  21. </head>  
  22.   
  23. <body style="margin:0;border:0">  
  24. <div style="width:2000px;height:90px;margin:0">  
  25. <a onClick="show()" href="#">点击</a>  
  26. </div>  
  27. </body>  
  28. </html>  
墨子哲
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
javascript获取设置div的高度和宽度兼容任何浏览器
10-26
Javascript如何获取和设置div的高度和宽度，并且兼容任何浏览器，感兴趣的朋友不妨看看下面的代码或许有意想不到的收获
js获取屏幕、浏览器、页面的高度宽度
艾丽的博客
02-03 7494
本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。 一、介绍 1. 容器 一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。 HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。 通过Js的一些对象可以获取这些容器的高度、宽度。 2. 物理尺寸和分辨率 容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。 如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。 3. 展示图 注意： 图中的body根
js怎样获取浏览器窗口尺寸
最新发布
子玉的博客
10-29 737
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
JS：如何获取浏览器窗口尺寸？
TianXuab的博客
10-09 783
JavaScript是一种广泛使用的脚本语言，用于开发网页和应用程序。在Web开发中，经常需要获取浏览器窗口的尺寸，以便根据窗口大小进行布局或执行其他操作。本文将介绍如何使用JavaScript来获取浏览器窗口尺寸。
js获取浏览器的宽度和高度
weixin_38673922的博客
02-01 475
window.innerWidth window.innerHeight
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
10-25
主要汇总介绍了JavaScript获取网页、浏览器、屏幕高度和宽度的方法，非常使用，有需要的小伙伴参考下。
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
10-25
主要介绍了javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等,需要的朋友可以参考下
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar
01-31
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar
关于浏览器的几个高度和宽度
一步一个脚印
09-19 1736
在用百度地图Javascript API的时候，自己在sublime创建了以武汉为中心点的属于自己的地图。 作为新手的前端小白，创建的地图大小不能够很好地铺满整个浏览器页面。 所以就引出了关于浏览器页面大小的几个长和宽的知识点。 document.body.clientWidth; //网页可见区域宽(body) document.body.clientHeight; ...
JS如何获取屏幕浏览器网页高度宽度
08-10
NULL 博文链接：https://jsdit.iteye.com/blog/1198868
js获取浏览器和屏幕的各种宽度高度
10-20
本文主要介绍了js获取浏览器和屏幕的各种宽度高度的方法，具有很好的参考价值，下面跟着小编一起来看下吧
js获取浏览器高度和宽度值(多浏览器)
05-04
js获取浏览器高度和宽度值(多浏览器)，需要的看看
js 获取浏览器高度和宽度值(多浏览器)
10-29
js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器窗口页面宽度、高度的方法 kaki 的博客
qq_44988088的博客
07-01 1891
**js获取浏览器窗口页面宽度、高度的方法 ** 直接 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin ale
js获取浏览器当前屏幕的宽度和高度
热门推荐
大华阿大华的博客
07-23 1万+
1.获取HTML元素     document.documentElement 2.获取body元素     document.body 3.兼容所有浏览器获取当前屏幕的宽度。    var winWidth = document.body.clientWidth || document.documentElement.clientWidth; 4.兼容所有浏览器获取当前屏幕的高度。 ...
js中的位置[一]
weixin_30737433的博客
12-12 165
<script>var s; s += "\r\n网页可见区域宽："+ document.body.clientWidth; s += "\r\n网页可见区域高："+ document.body.clientHeight; s += "\r\n网页可见区域宽："+ document.body.offsetWidth+" (包括边线的宽)"; s += "\r\n网页可见区域高："+ d...
JS兼容所有浏览器获取浏览器高度和宽度
u014798510的博客
08-19 4324
var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
使用JAVAScript将div的宽度和高度设置为浏览器宽度和高度的一半，margin设置div在水平和垂直两个方向居中
06-10
// 获取浏览器窗口宽度和高度 var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; // 获取要设置样式的div元素 var divElement = document.getElementById("myDiv"); // 设置div的宽度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值