<!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=gb2312" />
<title>请调整浏览器窗口</title>
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
分享到：
相关推荐
本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解，主要集中在JavaScript的DOM操作和窗口对象（Window）的属性与方法上。 1. **当前页面可视区域尺寸**...
通过 `document.body.clientWidth` 和 `document.body.clientHeight`，我们可以获取到网页可见区域的宽度和高度，而通过 `window.innerWidth` 和 `window.innerHeight`，我们可以获取浏览器窗口的宽度和高度。...
### JS 获取浏览器的高度和宽度详解 在Web开发中，经常需要获取浏览器的尺寸信息以便进行适配或调整页面布局。JavaScript 提供了多种方法来获取这些信息，不同的浏览器可能使用不同的属性来达到相同的目的。本篇...
### JavaScript 获取当前页面可视高度和宽度以及浏览器宽度和高度的函数 #### 一、概述 在Web开发过程中，经常需要获取当前页面可视区域的高度和宽度，以及整个浏览器窗口的尺寸。这些信息对于响应式设计、页面...
在JavaScript中，获取浏览器的高度和宽度是常见的需求，这在进行网页布局、动态调整元素尺寸或者实现滚动事件处理时尤其重要。以下将详细介绍如何通过JavaScript获取这些信息，并探讨不同浏览器间可能存在的差异。 ...
浏览器高度和宽度值获取方法汇总 在 Web 开发中，获取浏览器的高度和宽度值是非常重要的，因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而，浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...
在JavaScript（JS）中，获取和操作元素的宽度与高度是常见的需求，特别是在网页动态布局、用户交互以及响应式设计中。本主题将深入探讨如何使用JavaScript处理元素的宽度和高度，以及相关的尺寸句柄。 首先，我们有...
在JavaScript中，获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求，这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法，用于获取这些信息： 1. **网页可见...
- **Scroll Size**：表示元素（如页面）的实际宽度和高度，包括任何不可见的部分。 - **Screen Size**：屏幕的尺寸，可以是整个显示器的尺寸或浏览器窗口的尺寸。 #### 二、获取浏览器显示区域尺寸的方法 ##### 1....
同时，页面上还放置了四个按钮，分别对应增加宽度、减少宽度、增加高度和减少高度的操作。通过id属性给这些按钮也做了标识，比如"addwidthkeleyi"。 接下来，代码中使用jQuery监听这些按钮的点击事件。当点击相应的...
4. **CSS calc()函数**：对于响应式设计，可以结合`calc()`函数计算宽度和高度，以实现自适应居中。 ```css .centered-element { width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px auto; } `...
使用JavaScript（简称JS），开发者可以通过多种方式获取屏幕的高度和宽度，以及页面元素的尺寸信息。 首先，要获取屏幕的宽度和高度，可以使用window对象提供的screen属性。具体来说，可以使用window.screen.width...
接下来，我们介绍如何获取网页正文的全文宽高，也就是网页内容的实际高度和宽度。这可以通过获取元素的scrollWidth和scrollHeight属性来实现。scrollWidth代表元素的总宽度，scrollHeight代表元素的总高度。对于现代...
1. **CSS属性**：`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`，但这种方法通常不足以实现完全自适应，因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**：使用...
JS动态设置表格高度、宽度所有浏览器全兼容
7. **兼容性与跨平台**：在不同的操作系统、浏览器或设备上，计算字符串宽度的结果可能会有所差异，因此在开发时需要注意兼容性和一致性。 8. **排版优化**：在实际应用中，我们可能还需要考虑如何优化文本布局，如...
在CSS中，当我们为一个元素设置背景图像时，如果没有指定宽度和高度，浏览器可能会以不可预期的方式渲染背景图。这可能导致图像被拉伸、裁剪或无法完全显示。为了解决这个问题，`postcss-background-image-auto-size...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责实现客户端的交互功能，增强用户界面...当然，实际应用中还需要考虑浏览器兼容性、用户体验优化等问题，这需要对JavaScript有更深入的理解和实践。
- 要实现宽度和高度的自适应，我们需要先确定相册容器的宽度，然后根据比例计算出每个图片的高度。例如，可以使用`$(window).width()`获取当前窗口宽度，再根据图片的原始宽高比调整其高度。 5. **动画效果**： -...