转自:http://kanglecjr.iteye.com/blog/368183
关于获取各种浏览器可见窗口大小的一点点研究
1. <script>
2. function getInfo()
3. {
4. var s = "";
5. s = " 网页可见区域宽:" document.body.clientWidth;
6. s = " 网页可见区域高:" document.body.clientHeight;
7. s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)";
8. s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)";
9. s = " 网页正文全文宽:" document.body.scrollWidth;
10. s = " 网页正文全文高:" document.body.scrollHeight;
11. s = " 网页被卷去的高(ff):" document.body.scrollTop;
12. s = " 网页被卷去的高(ie):" document.documentElement.scrollTop;
13. s = " 网页被卷去的左:" document.body.scrollLeft;
14. s = " 网页正文部分上:" window.screenTop;
15. s = " 网页正文部分左:" window.screenLeft;
16. s = " 屏幕分辨率的高:" window.screen.height;
17. s = " 屏幕分辨率的宽:" window.screen.width;
18. s = " 屏幕可用工作区高度:" window.screen.availHeight;
19. s = " 屏幕可用工作区宽度:" window.screen.availWidth;
20.
21.
22. s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
23. s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
24. //alert (s);
25. }
26. getInfo();
27. </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高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
分享到:
相关推荐
### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...
在JavaScript中获取网页的高度和宽度是常见的需求,这有助于我们进行页面布局、滚动条处理或者自适应设计。以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置...
在JavaScript编程语言中,获取网页的高度和宽度是常见的需求,特别是在动态布局、页面滚动或响应式设计中。本文将深入探讨如何使用JavaScript有效地获取这些信息,并结合实际应用场景进行讲解。 一、窗口对象...
JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...
在JavaScript中,获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点,通过学习和理解这些内容,开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。
通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...
JavaScript作为一种广泛应用于网页编程的语言,提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸...
总之,获取页面高度和宽度是 JavaScript 开发中的常见任务,但需要注意浏览器的兼容性和差异。正确的方法是使用兼容性好的代码,以确保在所有主流浏览器中都能得到期望的结果。理解 `document.body` 和 `document....
在当今Web开发中,动态修改页面元素的尺寸是一个非常常见的需求,尤其是在响应式设计中,我们经常需要根据不同设备或用户的操作来调整元素的宽度和高度。本文将介绍如何使用jQuery来实现动态改变div的宽度和高度。...
### JavaScript 获取当前页面可视高度和宽度以及浏览器宽度和高度的函数 #### 一、概述 在Web开发过程中,经常需要获取当前页面可视区域的高度和宽度,以及整个浏览器窗口的尺寸。这些信息对于响应式设计、页面...
网页缩略图生成技术是一种常见的Web开发功能,它允许用户通过输入网址、设定目标宽度和高度,快速获取网站页面的预览图片。这种技术在许多应用场景中非常实用,例如社交媒体分享、搜索引擎结果展示、网站目录索引等...
在JavaScript编程语言中,开发者经常需要获取与网页和屏幕尺寸相关的数据,比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...
然而,当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时,会发现常规的JavaScript方法无法直接获取这些尺寸值,因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息,需要采用一些...
在网页设计中,"自适应宽度高度的tab标签文字切换效果"是一种常见的交互设计元素,它使得用户可以方便地在不同的内容区域之间切换,而这些内容区域通常被组织成一个可选择的标签条。这种设计既提升了用户体验,又...
然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...
"jQuery自适应父容器宽度高度代码"就是一个实例,它利用jQuery动态计算文本的字体大小,确保文字能够完美填充其父容器。 首先,我们要理解这个特效的核心思想。当文本内容需要适应父容器时,通常会涉及到两个主要的...
在网页设计中,DIV层的自适应高度和宽度是非常重要的,因为它可以使网页适应不同的浏览器大小和分辨率,从而提高用户体验。以下是使用JS+CSS来实现DIV层自适应高度和宽度的知识点: 一、CSS基础知识 在开始之前,...
本主题将深入探讨如何利用CSS和JavaScript实现蒙版的居中技术,并讲解如何使用JavaScript获取div的宽度和高度。 首先,让我们了解CSS中的居中技术。在CSS中,有多种方法可以实现元素的水平和垂直居中。以下是一些...