|
区域说明
|
JavaScript Code
|
|
网页可见区域宽
|
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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Screen Size Test</title>
<script language="JavaScript" type="text/JavaScript">
function displayScreenSize() {
var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
var Str="<p>";
Str+="网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
Str+="网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
Str+="网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
Str+="网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br>";
Str+="网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
Str+="网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
Str+="网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
Str+="网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
Str+="网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
Str+="网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
Str+="屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
Str+="屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
Str+="屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
Str+="</p>"
document.getElementById('dispaly').innerHTML=Str;
}
</script>
<style type="text/css">
<!--
A:link {
text-decoration: none;
color: #ff0000;
font-weight: normal;
}
A:visited {
text-decoration: none;
color: #ff6666;
font-weight: normal;
}
A:active {
text-decoration: none;
color: #ff0000;
font-weight: normal;
}
A:hover {
text-decoration: underline;
color: #ff0000;
font-weight: normal;
}
.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #990000;
}
.display {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.data {
color: #FF0000;
font-weight: bold;
}
.foot {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5e5e5e;
}
-->
</style>
</head>
<body onResize="javascript:displayScreenSize();" onLoad="javascript:displayScreenSize();">
<span class="title">Screen Size Test</span>
<hr align="left" size="1" noshade>
<span class="display">
Now we get the screen size about this browser
</span>
<br>
<span class="display" id="dispaly"></span>
<hr align="left" size="1" noshade>
<p align="right">
<span class="foot">
Screen Size Test by <a href="http://apolloge.cnblogs.com/">apolloge</a>
</span>
</p>
</body>
</html>
内容来源网络
分享到：
相关推荐
在前端开发中，经常需要获取浏览器的可见窗口大小以及其他相关信息，以便能够根据不同的设备和浏览器环境来优化网页布局与用户体验。本文将详细解析如何通过JavaScript来获取不同浏览器下的窗口尺寸，并探讨一些特殊...
### JS 获取浏览器窗口大小 在前端开发中，经常需要获取浏览器窗口的大小，以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...
在JavaScript中，动态获取浏览器页面放大缩小的比例是一个常见的需求，特别是在进行响应式设计或精确的图形渲染时。这个过程涉及到浏览器窗口的尺寸变化监听、设备像素比（devicePixelRatio）的检测以及对不同浏览器...
在网页开发中，经常需要获取浏览器的可见窗口大小，以便调整布局或执行某些基于视口尺寸的操作。本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先，我们有两个基本属性可以用来获取页面的宽度...
在JavaScript中，获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求，这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法，用于获取这些信息： 1. **网页可见...
本文将详细讲解如何使用JavaScript获取浏览器的窗口宽度和高度，并探讨不同浏览器之间的差异。 首先，我们有两种主要的方法来获取浏览器的可视区域大小： 1. `document.body.clientWidth` 和 `document.body....
在JavaScript中，获取浏览器对象是了解用户环境和实现特定功能的关键。这主要涉及到浏览器的`navigator`对象、`window`对象以及`screen`对象。这些对象提供了丰富的信息，包括但不限于浏览器类型、版本、语言设置、...
在JavaScript中，获取浏览器的高度和宽度是常见的需求，用于适应不同的屏幕尺寸和实现响应式设计。然而，由于不同浏览器之间的差异，获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下，包括IE、Fire...
以下将详细介绍如何通过JavaScript获取这些信息，并探讨不同浏览器间可能存在的差异。 首先，我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度，包括工具栏和其他用户界面...
在JavaScript中，获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点，通过学习和理解这些内容，开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。
这篇博客“js获取浏览器宽和高”可能详细阐述了如何利用JavaScript来获取这些信息。虽然提供的链接指向了一个错误的地址，但我们可以根据通常的方法来解释这个过程。 1. **浏览器窗口对象**： 在JavaScript中，`...
通过 `document.body.clientWidth` 和 `document.body.clientHeight`，我们可以获取到网页可见区域的宽度和高度，而通过 `window.innerWidth` 和 `window.innerHeight`，我们可以获取浏览器窗口的宽度和高度。...
在JavaScript编程语言中，开发者经常需要获取与网页和屏幕尺寸相关的数据，比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...
在JavaScript编程中，获取页面和屏幕尺寸大小是前端开发中常见的需求之一，这涉及到一系列的属性和方法，用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数，包括...
其中一项常见需求是获取浏览器窗口的各种属性值，比如宽度、高度等，这对于响应式设计或某些特定功能（如弹窗位置计算）非常有用。 #### 一、主要窗口属性 在提供的代码示例中，通过`getInfo`函数展示了如何获取一...
在JavaScript中，我们通常通过`window`对象来获取浏览器窗口的尺寸。`window`对象提供了两个属性，`innerHeight`和`innerWidth`，它们分别返回浏览器视口的内部高度和宽度，不包括浏览器的工具栏、菜单栏等外围元素...
这通常用于获取用户实际可用于网页显示的区域大小。 6. `window.screenTop` 和 `window.screenLeft` 这两个属性在某些浏览器中表示网页正文距离屏幕顶部和左侧的距离，但其行为在不同的浏览器之间可能存在差异，...