JS获取浏览器高度和宽度

浏览器尺寸与定位属性详解
最新推荐文章于 2024-07-16 14:46:16 发布
原创 最新推荐文章于 2024-07-16 14:46:16 发布 · 737 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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高）



网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth





HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
js获取浏览器高度和宽度值(多浏览器)
05-04
js获取浏览器高度和宽度值(多浏览器)，需要的看看
JavaScript获取浏览器高度和宽度值
weixin_46809332的博客
09-09 356
IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中： document.body.clientWidth ==> BODY对象宽度 document.b.
JS 获取浏览器高度和宽度
dichen3165的博客
10-21 339
JS获取浏览器高度和宽度 IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHei...
js获取浏览器的宽度和高度
weixin_38673922的博客
02-01 540
window.innerWidth window.innerHeight
JS获取网页的宽高
weixin_72329752的博客
07-16 728
这些方法将返回视口（viewport）的宽度和高度，即可见区域的宽度和高度，不包括滚动条和其他浏览器窗口装饰的部分。要获取网页的宽度和高度，可以使用 JavaScript 来动态获取。这些代码将返回整个页面的宽度和高度，包括滚动条和隐藏部分。
js获取浏览器高度和宽度值（多浏览器）
Quber
08-15 265
js获取浏览器高度和宽度值,尽量的考虑了多浏览器 IE中：document.body.clientWidth==>BODY对象宽度document.body.clientHeight==>BODY对象高度document.documentElement.clientWidth==>可见区域宽度document.documentElement.clien...
js获取浏览器高度和宽度值(多浏览器 图解-经典)
Cross
03-10 2038
最近做写前端的代码比较多，对前端页面的详细布局不是很清楚的，备份下留着自己以后用。 document.write("屏幕尺寸："+screen.width+"*"+screen.height) document.documentElement.clientHeight IE下为0. 加上: 则没问题。 否则用body IE中： document.body
JS - 获取网页宽高封装
堇年
10-05 210
function getScreen() { let width, height; // IE9以及IE9以上的浏览器 if(window.innerWidth){ width = window.innerWidth; height = window.innerHeight; }else if(document.compatMode ...
js获取浏览器和屏幕的各种宽度高度
10-20
本文主要介绍了js获取浏览器和屏幕的各种宽度高度的方法，具有很好的参考价值，下面跟着小编一起来看下吧
js如何获得浏览器的宽高
zhang20040217的博客
01-02 1272
返回的是视口的尺寸，不包括滚动条。如果你只关心视口的大小，那么使用后者可能更合适。来获取视口（viewport）的宽度和高度。返回的是浏览器窗口的尺寸，包括滚动条（如果存在的话）。属性来获取浏览器窗口的宽度和高度，或者使用。在JavaScript中，可以使用。
js获取屏幕、浏览器、页面的高度宽度
艾丽的博客
02-03 8450
本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。 一、介绍 1. 容器 一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。 HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。 通过Js的一些对象可以获取这些容器的高度、宽度。 2. 物理尺寸和分辨率 容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。 如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。 3. 展示图 注意： 图中的body根
js 获取浏览器屏幕的宽度和高度
全易
10-16 256
分两种： 不包括滚动条和工具栏的宽度或高度： window.innerWidth; // 宽 window.innerHeight; // 高 就是红框内的部分： 包括滚动条和工具栏的宽度或高度： window.outerWidth; // 宽 window.outerHeight; // 高 就是蓝框内的部分： ...
javascript获取浏览器宽度和高度
bravezhe的专栏
06-07 6828
测试浏览器及版本：IE8、FF5、Chrome12 屏幕分辨率：1366 x 768 文档声明：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">   1.获取屏幕分辨率（所有浏览器一致）： 屏幕横向分辨率：window.screen.width   1366
js 获取浏览器宽度和高度
wuji_1的专栏
05-28 1058
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条 ）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：     window.innerHeight - 浏览器窗口的内部高度     window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、
js获取浏览器当前屏幕的宽度和高度
热门推荐
大华阿大华的博客
07-23 1万+
1.获取HTML元素     document.documentElement 2.获取body元素     document.body 3.兼容所有浏览器获取当前屏幕的宽度。    var winWidth = document.body.clientWidth || document.documentElement.clientWidth; 4.兼容所有浏览器获取当前屏幕的高度。 ...
js 获取屏幕各种宽高的方法
weixin_34289454的博客
07-31 174
2019独角兽企业重金招聘Python工程师标准>>> ...
js获取窗体高度和宽度
最新发布
04-20
<think>好的，用户现在的问题是关于如何使用JavaScript获取窗口的高度和宽度，以实现响应式布局。我需要结合之前的对话历史和提供的引用内容来回答这个问题。首先，回顾一下用户之前的提问和我的回答。 用户之前询问的是在Vue2中实现同源iframe的响应式布局，我给出了基于CSS、Vue逻辑层和跨文档通信的方案，并提到了使用MutationObserver和postMessage等技术。现在用户的新问题转向如何用JavaScript获取窗口尺寸，可能用于响应式布局，这需要我调整焦点到纯JavaScript的方法，并结合引用中的信息。 首先，用户提供的引用内容中，引用[2]提到了使用JavaScript监听视口变化并应用不同样式，这直接相关。引用[1]和[3]讨论了响应式布局的不同方法，比如媒体查询和流式布局，但用户现在明确需要JavaScript的方法，所以重点在引用[2]。 接下来，我需要确定用户的需求。用户可能已经了解CSS媒体查询，但希望用JavaScript动态调整布局，比如根据窗口尺寸加载不同内容，或处理某些无法用CSS实现的复杂交互。需要提供获取窗口高度和宽度的几种方法，并解释它们的区别，以及如何监听窗口变化，同时考虑性能优化。 可能的步骤包括： 1. 区分不同视口属性：window.innerWidth、document.documentElement.clientWidth等，解释它们的区别。 2. 提供基本的代码示例，展示如何获取尺寸并应用到布局中。 3. 讨论如何监听resize事件，并注意防抖优化，避免性能问题。 4. 结合响应式布局的实际应用场景，比如动态加载资源或调整元素样式。 5. 引用之前的回答，提到可能结合Vue的使用，比如在Vue组件中集成这些方法。 还需要注意用户可能混淆窗口尺寸与元素尺寸，需要明确说明。同时，考虑到用户之前处理的是iframe，可能需要提到在iframe内部如何获取父窗口的尺寸，但当前问题可能更关注主窗口。此外，引用[2]中的示例代码可能有用，可以借鉴其中的思路。 最后，确保回答结构清晰，分点说明，并提供代码示例和注意事项，如跨浏览器兼容性、移动端适配等。同时，生成相关问题，帮助用户深入理解。</think>根据引用[2]中提到的JS响应式布局实现方式，结合现代浏览器API，以下是获取窗口尺寸的完整实现方案： --- ### 一、基础尺寸获取方法 ```javascript // 获取可视窗口宽度（含滚动条） const windowWidth = window.innerWidth // 获取可视窗口高度（含滚动条） const windowHeight = window.innerHeight // 获取文档渲染宽度（不含滚动条） const clientWidth = document.documentElement.clientWidth // 获取文档渲染高度（不含滚动条） const clientHeight = document.documentElement.clientHeight ``` #### 核心属性对比： | 属性 | 包含滚动条 | 实时性 | 应用场景 | |------------------------------|------------|--------|----------------------| | `window.innerWidth` | ✔️ | 高 | 媒体查询模拟 | | `document.documentElement.clientWidth` | ❌ | 中 | 精确布局计算 | --- ### 二、响应式监听方案 ```javascript // 防抖函数优化（引用[2]的优化实现） function debounce(fn, delay = 200) { let timer return function() { clearTimeout(timer) timer = setTimeout(() => fn.apply(this, arguments), delay) } } // 尺寸监听器 const handleResize = debounce(() => { console.log('当前窗口尺寸:', window.innerWidth, 'x', window.innerHeight) // 响应式布局应用示例 if (window.innerWidth >= 1200) { document.body.classList.add('desktop-mode') document.body.classList.remove('tablet-mode') } else if (window.innerWidth >= 768) { document.body.classList.add('tablet-mode') document.body.classList.remove('mobile-mode') } else { document.body.classList.add('mobile-mode') } }) // 添加监听（引用[2]基础方案增强） window.addEventListener('resize', handleResize) // 初始执行 handleResize() ``` --- ### 三、高级应用场景 #### 1. 动态加载资源（引用[1]自适应布局延伸） ```javascript function loadResponsiveResource() { const breakpoints = { mobile: 640, tablet: 1024, desktop: 1440 } const currentWidth = window.innerWidth let imageSrc if (currentWidth >= breakpoints.desktop) { imageSrc = 'large.jpg' } else if (currentWidth >= breakpoints.tablet) { imageSrc = 'medium.jpg' } else { imageSrc = 'small.jpg' } document.getElementById('responsive-image').src = imageSrc } ``` #### 2. 与CSS媒体查询同步 ```javascript // 检测当前激活的媒体查询 function getActiveMediaQuery() { return window.matchMedia('(min-width: 1200px)').matches ? 'desktop' : window.matchMedia('(min-width: 768px)').matches ? 'tablet' : 'mobile' } ``` --- ### 四、移动端特殊处理 ```javascript // 处理虚拟键盘弹出（引用[3]移动端适配延伸） const visualViewport = window.visualViewport visualViewport.addEventListener('resize', () => { console.log('视觉视口高度:', visualViewport.height) }) // 检测设备方向变化 window.addEventListener('orientationchange', () => { console.log('新方向:', window.orientation) }) ``` --- ### 关键注意事项 1. **性能优化**：使用防抖/节流控制触发频率，推荐200ms间隔[^2] 2. **单位统一**：建议始终使用`px`进行计算，避免rem单位导致的误差 3. **浏览器兼容**：`visualViewport`需检测兼容性（Chrome 61+） 4. **框架集成**：在Vue中推荐使用`this.$nextTick()`确保DOM更新后计算 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值