测试浏览器及版本: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 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...
本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...
通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...
获取浏览器的高度和宽度值可以使用以下方法: ### 使用 `document.body` 对象 * `document.body.clientHeight`:获取浏览器的可见区域高度 * `document.body.clientWidth`:获取浏览器的可见区域宽度 * `document....
### JavaScript 获取当前页面可视高度和宽度以及浏览器宽度和高度的函数 #### 一、概述 在Web开发过程中,经常需要获取当前页面可视区域的高度和宽度,以及整个浏览器窗口的尺寸。这些信息对于响应式设计、页面...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
在JavaScript中,获取浏览器的高度和宽度是常见的需求,用于适应不同的屏幕尺寸和实现响应式设计。然而,由于不同浏览器之间的差异,获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下,包括IE、Fire...
在JavaScript中,获取浏览器的高度和宽度是常见的需求,这在进行网页布局、动态调整元素尺寸或者实现滚动事件处理时尤其重要。以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 ...
在 JavaScript 中,获取浏览器高度和宽度值是非常重要的,下面将详细介绍各种方法: 获取浏览器高度和宽度值 在 JavaScript 中,可以使用多种方法来获取浏览器高度和宽度值,以下是一些常用的方法: 1. 使用 `...
在JavaScript中,获取浏览器的高度和宽度是常见的需求,这有助于我们进行页面布局、响应式设计或者自适应调整。本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 ...
本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 #### 一、获取滚动条高度 滚动条的高度对于实现诸如返回顶部等功能至关重要。下面介绍一个简单的方法来获取滚动条的高度: ```...
### JavaScript 获取和设置 div 的高度和宽度以兼容各种浏览器 #### 概述 在Web开发过程中,经常需要处理不同浏览器间的兼容性问题。对于获取和设置`div`元素的高度和宽度,JavaScript提供了多种方法来确保跨...
### JS 获取浏览器的高度和宽度详解 在Web开发中,经常需要获取浏览器的尺寸信息以便进行适配或调整页面布局。JavaScript 提供了多种方法来获取这些信息,不同的浏览器可能使用不同的属性来达到相同的目的。本篇...
总之,获取页面高度和宽度是 JavaScript 开发中的常见任务,但需要注意浏览器的兼容性和差异。正确的方法是使用兼容性好的代码,以确保在所有主流浏览器中都能得到期望的结果。理解 `document.body` 和 `document....
在JavaScript中获取浏览器参数是一项常见的任务,这有助于开发者更好地了解用户环境,以便提供更好的兼容性和个性化体验。这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息,...
在JavaScript中获取网页的高度和宽度是常见的需求,这有助于我们进行页面布局、滚动条处理或者自适应设计。以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置...
JavaScript作为一种广泛应用于网页编程的语言,提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...