`
lanhuidong
  • 浏览: 227746 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript获取浏览器宽度和高度

 
阅读更多

测试浏览器及版本: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大于等于可见区域高度

 

有文档声明的测试代码:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试1</title>
<script type="text/javascript">
function show(){
    var s = "";
	s += "网页可见区域宽度:"+document.body.clientWidth;
	s += "\n网页可见区域高度:"+document.body.clientHeight;
	s += "\n网页可见区域宽度(包括边线):"+document.body.offsetWidth;
	s += "\n网页可见区域高度(包括边线):"+document.body.offsetHeight;
	s += "\n网页正文宽度:"+document.body.scrollWidth;
	s += "\n网页正文高度:"+document.body.scrollHeight;
	s += "\n屏幕可用工作区域宽度:"+window.screen.availWidth;
	s += "\n屏幕可用工作区域高度:"+window.screen.availHeight;
	s += "\n屏幕分辨率宽度:"+window.screen.width;
	s += "\n屏幕分辨率高度:"+window.screen.height;
	alert(s);
}
</script>
</head>

<body style="margin:0;border:0">
<div style="width:2000px;height:90px;margin:0">
<a onclick="show()" href="#">点击</a>
</div>
</body>
</html>

 

无文档声明的测试代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试2</title>
<script type="text/javascript">
function show(){
    var s = "";
	s += "网页可见区域宽度:"+document.body.clientWidth;
	s += "\n网页可见区域高度:"+document.body.clientHeight;
	s += "\n网页可见区域宽度(包括边线):"+document.body.offsetWidth;
	s += "\n网页可见区域高度(包括边线):"+document.body.offsetHeight;
	s += "\n网页正文宽度:"+document.body.scrollWidth;
	s += "\n网页正文高度:"+document.body.scrollHeight;
	s += "\n屏幕可用工作区域宽度:"+window.screen.availWidth;
	s += "\n屏幕可用工作区域高度:"+window.screen.availHeight;
	s += "\n屏幕分辨率宽度:"+window.screen.width;
	s += "\n屏幕分辨率高度:"+window.screen.height;
	alert(s);
}
</script>
</head>

<body style="margin:0;border:0">
<div style="width:2000px;height:90px;margin:0">
<a onClick="show()" href="#">点击</a>
</div>
</body>
</html>

 

分享到:
评论

相关推荐

    javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...

    js获取文本框的值!js获取浏览器高度和宽度值[收集].pdf

    获取浏览器的高度和宽度值可以使用以下方法: ### 使用 `document.body` 对象 * `document.body.clientHeight`:获取浏览器的可见区域高度 * `document.body.clientWidth`:获取浏览器的可见区域宽度 * `document....

    javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx

    ### JavaScript 获取当前页面可视高度和宽度以及浏览器宽度和高度的函数 #### 一、概述 在Web开发过程中,经常需要获取当前页面可视区域的高度和宽度,以及整个浏览器窗口的尺寸。这些信息对于响应式设计、页面...

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    js获取浏览器高度和宽度值(多浏览器)

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,用于适应不同的屏幕尺寸和实现响应式设计。然而,由于不同浏览器之间的差异,获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下,包括IE、Fire...

    JS获取浏览器的高度和宽度

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,这在进行网页布局、动态调整元素尺寸或者实现滚动事件处理时尤其重要。以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 ...

    js获取文本框的值!js获取浏览器高度和宽度值.pdf

    在 JavaScript 中,获取浏览器高度和宽度值是非常重要的,下面将详细介绍各种方法: 获取浏览器高度和宽度值 在 JavaScript 中,可以使用多种方法来获取浏览器高度和宽度值,以下是一些常用的方法: 1. 使用 `...

    js获取浏览器高度和宽度值.pdf

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,这有助于我们进行页面布局、响应式设计或者自适应调整。本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 ...

    javascript获取滚动条高度 页面宽度与高度

    本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 #### 一、获取滚动条高度 滚动条的高度对于实现诸如返回顶部等功能至关重要。下面介绍一个简单的方法来获取滚动条的高度: ```...

    javascript获取设置div的高度和宽度兼容任何浏览器.docx

    ### JavaScript 获取和设置 div 的高度和宽度以兼容各种浏览器 #### 概述 在Web开发过程中,经常需要处理不同浏览器间的兼容性问题。对于获取和设置`div`元素的高度和宽度,JavaScript提供了多种方法来确保跨...

    JS浏览器的高度和宽度

    ### JS 获取浏览器的高度和宽度详解 在Web开发中,经常需要获取浏览器的尺寸信息以便进行适配或调整页面布局。JavaScript 提供了多种方法来获取这些信息,不同的浏览器可能使用不同的属性来达到相同的目的。本篇...

    Javascript 获取页面高度(多种浏览器)

    总之,获取页面高度和宽度是 JavaScript 开发中的常见任务,但需要注意浏览器的兼容性和差异。正确的方法是使用兼容性好的代码,以确保在所有主流浏览器中都能得到期望的结果。理解 `document.body` 和 `document....

    JS 获取浏览器参数

    在JavaScript中获取浏览器参数是一项常见的任务,这有助于开发者更好地了解用户环境,以便提供更好的兼容性和个性化体验。这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息,...

    javascript 获取网页高度宽度.pdf

    在JavaScript中获取网页的高度和宽度是常见的需求,这有助于我们进行页面布局、滚动条处理或者自适应设计。以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置...

    JavaScript获取屏幕高度和宽度等信息

    JavaScript作为一种广泛应用于网页编程的语言,提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...

Global site tag (gtag.js) - Google Analytics