js获取浏览器可视区域的宽度

   在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:

document.body.offsetWidth
document.body.offsetHeight
在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:
document.documentElement.clientWidth
document.documentElement.clientHeight


   网页可见区域宽: 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;


   clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
   clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
   offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
   offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
   screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
   screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
   x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
   y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

<think> 我们参考多个引用来解答如何获取浏览器可视区域宽度的问题。 根据引用[1]和[2],我们可以使用多种方法来获取,并且需要考虑浏览器兼容性。 常见的方法有: 1. window.innerWidth:现代浏览器支持,但包括滚动条宽度(引用[4]提到包含滚动条) 2. document.documentElement.clientWidth:标准模式(非怪异模式)下,且不包括滚动条 3. document.body.clientWidth:在怪异模式(BackCompat)下使用 引用[1]提供了一个函数getViewPortOffset(),它首先尝试使用window.innerWidth,如果不支持则检查文档模式(通过document.compatMode),如果是怪异模式则使用document.body.clientWidth,否则使用document.documentElement.clientWidth。 引用[2]则提供了一个简洁的表达式: var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 因此,我们可以总结:为了兼容不同的浏览器,我们可以使用逻辑或操作符(||)来依次尝试不同的属性。 具体步骤如下: 1. 优先使用window.innerWidth(但注意,它包含滚动条,而通常可视区域宽度不包括滚动条?实际上,clientWidth和innerWidth对于宽度的定义有细微差别) 2. 其次使用document.documentElement.clientWidth(标准模式) 3. 最后使用document.body.clientWidth(怪异模式) 但是,注意引用[3]指出: 网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 引用[4]则指出innerWidth和innerHeight是包含滚动条的。 所以,我们通常认为document.documentElement.clientWidth和document.body.clientWidth是不包括滚动条的(即内容区域的宽度),而window.innerWidth包括滚动条。 因此,根据需求,如果我们想要获取不包括滚动条的可视区域宽度,那么应该优先使用document.documentElement.clientWidth(标准模式)或document.body.clientWidth(怪异模式)。而window.innerWidth包括滚动条,可能不是我们想要的。 但是,引用[2]的写法是将它们混合使用,并且没有区分是否包含滚动条。在实际应用中,如果我们的需求是获取整个视口的宽度(包括滚动条),则使用window.innerWidth;如果不需要滚动条,则使用clientWidth。 根据问题,用户想获取的是“可视区域宽度”,通常理解就是浏览器窗口内用于显示网页内容的区域宽度(不包括滚动条)。所以我们应该使用clientWidth。 因此,我们可以这样写: var width = window.innerWidth; // 但是注意,innerWidth包括滚动条,所以如果我们希望不包括滚动条,应该避免使用innerWidth(或者减去滚动条宽度,但滚动条宽度浏览器而异,比较复杂) 实际上,在标准模式下,我们通常使用document.documentElement.clientWidth,因为它返回的是viewport的宽度(不包括滚动条)。在怪异模式下,使用document.body.clientWidth。 所以,引用[1]的函数更符合我们的需求,因为它区分了模式。 但是,引用[5]中提到了scrollLeft, clientWidth, offsetWidth等,但没有直接给出新的方法。 综上所述,我们可以采用引用[1]的函数,也可以采用引用[2]的简洁写法(但注意,引用[2]的写法没有区分模式,而是依次尝试,因为这三个值在同一个浏览器中可能同时存在,但通常只有一个是正确的,所以采用或运算可能得到的是第一个存在的值,但可能是错误的)。 例如,在标准模式下,window.innerWidth存在(现代浏览器),但它包含滚动条,而document.documentElement.clientWidth不包含滚动条。如果我们希望不包含滚动条,那么应该优先使用document.documentElement.clientWidth,而不是window.innerWidth。 因此,我们需要调整顺序:优先使用document.documentElement.clientWidth,然后是document.body.clientWidth,最后才是window.innerWidth(或者不使用window.innerWidth,因为它的含义不同)。 但是,引用[1]的代码中,判断条件为: if (window.innerWidth) { ... } else if (document.compatMode == "BackCompat") { ... } // 注意原引用中写的是赋值=,应该是== else { ... } 这里,它首先使用innerWidth,但如果我们想要的是不包含滚动条的宽度,那么innerWidth可能不是最佳选择。 因此,我们更推荐使用以下方法: 在标准模式(CSS1Compat)下,使用document.documentElement.clientWidth 在怪异模式(BackCompat)下,使用document.body.clientWidth 所以,我们可以这样写: function getViewWidth() { if (document.compatMode === "BackCompat") { return document.body.clientWidth; } else { return document.documentElement.clientWidth; } } 但是,现代浏览器(包括IE9+)都支持document.documentElement.clientWidth,而且document.compatMode在标准模式下返回"CSS1Compat",在怪异模式下返回"BackCompat"。 引用[1]的代码中使用了window.innerWidth作为首选,可能是因为在一些移动端浏览器中,innerWidth更常用,并且移动端滚动条通常不占空间(覆盖在内容上),所以innerWidth和clientWidth相同?但为了安全起见,我们按照需求选择。 由于用户没有特别说明是否包含滚动条,但通常获取可视区域宽度是指不包括滚动条的(即网页内容显示区域的宽度),所以我们采用标准模式和怪异模式区分的方法。 因此,我们给出一个兼容性较好的获取浏览器可视区域宽度(不包括滚动条)的方法: function getViewportWidth() { // 检查是否为怪异模式 if (document.compatMode === "BackCompat") { return document.body.clientWidth; } else { return document.documentElement.clientWidth; } } 但是,为了更全面的兼容性,我们也可以考虑window.innerWidth,但是因为innerWidth包括滚动条,所以如果希望不包括滚动条,就不使用它。 另外,引用[2]和引用[5]都没有提到滚动条是否包含的问题,因此我们需要根据实际需求选择。 如果用户需要的是包括滚动条的区域宽度,那么使用window.innerWidth。 所以,根据问题描述,用户想要的是“获取浏览器可视区域宽度”,我们可以理解为不包括滚动条的区域,因此用上述方法。 但是,我们还可以参考现代浏览器的新API:window.visualViewport,它提供了更精确的视口信息,但兼容性需要考虑。 不过,根据引用内容,我们主要使用clientWidth即可。 综上所述,我们推荐使用: var viewportWidth = document.documentElement.clientWidth || document.body.clientWidth; 但是,这没有考虑模式。因为在标准模式下document.body.clientWidth可能是0(或者不是视口宽度),而在怪异模式下document.documentElement.clientWidth可能是0。所以必须通过document.compatMode判断。 因此,我们最终采用: function getViewportWidth() { if (document.compatMode === "BackCompat") { // 怪异模式 return document.body.clientWidth; } else { // 标准模式 return document.documentElement.clientWidth; } } 注意:在移动端,我们通常使用viewport meta标签,并且一般不会触发怪异模式,所以标准模式下的document.documentElement.clientWidth是可靠的。 另外,引用[1]的代码中有一个拼写错误:document.body.clientHeigth -> 应该是clientHeight,但宽度没有拼错。 所以,我们按照上述函数即可。 但是,我们也可以考虑加入window.innerWidth作为后备,以防上述两个属性都不存在(这种情况很少),但是要注意innerWidth包含滚动条。我们可以这样写: function getViewportWidth() { if (typeof window.innerWidth !== 'undefined') { // 注意:innerWidth包含滚动条,所以如果希望不包括滚动条,这里可能不是最佳选择。 // 但是,在移动端,滚动条通常不占宽度,所以innerWidth在这种情况下等同于不包括滚动条的宽度。 return window.innerWidth; } if (document.compatMode === "BackCompat") { return document.body.clientWidth; } else { return document.documentElement.clientWidth; } } 但实际上,现代浏览器几乎都支持window.innerWidth和document.documentElement.clientWidth,所以我们不必过于担心。 然而,根据引用[5]和引用[3],还有很多其他属性,但我们只需要可视区域宽度,所以不需要考虑滚动条等。 因此,我们提供一个最常用的方法,即通过兼容模式判断。 下面,我们给出最终答案。 </think> 根据您的需求,获取浏览器可视区域宽度(不包括滚动条)的推荐方法如下: ### 最佳解决方案 ```javascript function getViewportWidth() { // 标准模式使用 document.documentElement if (document.compatMode === "CSS1Compat") { return document.documentElement.clientWidth; } // 怪异模式使用 document.body else if (document.compatMode === "BackCompat") { return document.body.clientWidth; } // 现代浏览器优先方案 else { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; } } ``` ### 关键技术说明 1. **兼容性处理** - `document.compatMode` 检测渲染模式[^1][^5] - `"CSS1Compat"`:标准模式 → 使用 `document.documentElement.clientWidth` - `"BackCompat"`:怪异模式 → 使用 `document.body.clientWidth` - 现代浏览器备选方案:`window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth`[^2] 2. **属性区别** - `window.innerWidth`:包含滚动条宽度(不推荐用于布局计算)[^4] - `clientWidth`:不包含滚动条和边框的纯可视区域宽度[^3][^5] - `document.documentElement` 对应 `<html>` 元素,`document.body` 对应 `<body>` 元素 3. **使用示例** ```javascript // 获取当前可视宽度 const viewportWidth = getViewportWidth(); console.log("可视区域宽度:", viewportWidth); // 响应窗口变化 window.addEventListener('resize', () => { console.log("新宽度:", getViewportWidth()); }); ``` ### 不同场景建议 - **现代浏览器项目**:直接使用 `document.documentElement.clientWidth`[^2][^3] - **兼容IE的低版本项目**:配合 `document.compatMode` 检测[^1][^5] - **需要包含滚动条的场景**(极少情况):使用 `window.innerWidth`[^4] > 注意:所有方法获取的都是CSS像素值,与设备物理像素可能不同。在移动端开发时建议结合 `<meta name="viewport">` 标签使用[^3][^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值