<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=utf-8">
</meta></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>
分享到：
相关推荐
在这个名为“CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时，背景色变成淡蓝，否则淡绿色.zip”的压缩包中，包含了一个简单的媒体查询实例。 这个实例的核心在于`@media`规则，它是CSS3...
Resolution Test是专为Chrome浏览器制作的一款窗口大小调整工具，该款插件可以用多种分辨率大小来调整浏览器窗口大小，并能通过选取多个分辨率选项来打开多个相应大小的新窗口。 1、首先在标签页输入【chrome://...
在web开发中，调整浏览器窗口大小是常见的用户操作之一，JavaScript提供了一种机制，允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...
在这个特定的场景中，"调整浏览器窗口大小的速度有多快"这个问题涉及到JavaScript事件处理和性能优化。 首先，当用户更改浏览器窗口大小时，JavaScript可以监听到`resize`事件。这个事件会在每次窗口尺寸发生变化时...
当用户调整浏览器窗口大小时，JavaScript可以监听这个事件，并作出相应的响应。通过绑定resize事件，我们可以编写函数来更新页面布局，确保内容始终居中。以下是一个简单的例子： ```javascript window....
调整浏览器窗口大小时隐藏网站内容。 大多数时候，我们的网站是为客户构建的。 这些客户端乐于调整视口的大小以查找响应代码中的损坏。 我创建了这个脚本，以便当用户调整浏览器窗口大小时，他们看到的只是一个...
本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义，允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先，...
当浏览器窗口大小发生变化时，开发者通常需要对这种变化做出响应，比如动态调整布局、重绘内容或者更新某些元素的尺寸。这个场景涉及到JavaScript中的窗口大小改变事件。 在JavaScript中，有以下两个主要的事件用于...
### 浏览器窗口属性大全：深入理解与应用 #### 引言 在Web开发领域，`window`对象是核心且不可或缺的一部分，它不仅代表了浏览器窗口本身，还提供了丰富的属性和方法，允许开发者对浏览器窗口进行精细控制，实现...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。...因此，在实际应用中，需要考虑这些限制并做出相应的调整。
3. 管理窗口：用户可以自由地调整窗口大小、位置，也可以将窗口拖放到屏幕的不同部分，实现分屏查看。某些浏览器如Firefox和Chrome支持将一组窗口固定在一起，形成“工作区”，方便同时处理相关任务。 4. 关闭窗口...
镀Chrome表带谷歌浏览器扩展，在调整浏览器窗口大小时显示一个弹出窗口，显示当前的 Bootstrap 3 断点。 这主要是供我个人使用，但如果其他人觉得它有用，那就太棒了！安装随意下载此存储库并将其添加为 Google ...
如下所示： 当浏览器窗口发生该表示，会触发resize函数 // 浏览器大小发生变化时，给id为main-container的容器设置最小高度 ...以上这篇Jquery根据浏览器窗口改变调整大小的方法就是小编分享给大家的全部内容了
在使用过程中，有时我们需要调整浏览器窗口的大小，以便适应不同的任务需求，比如模拟不同设备的屏幕尺寸来测试网页的响应式设计。这就涉及到了“窗口大小调节”的功能。 在“谷歌浏览器窗口大小调节”这个主题中，...
固定中心 一个简单的 jQuery 插件，将元素直接定位... 即使您调整浏览器窗口的大小，该元素也将始终保持居中。 例子 $ ( '#div1' ) . fixedCenter ( { close : function ( ) { $ ( this ) . remove ( ) ; } } ) ;
通常，开发者会使用JavaScript、jQuery等工具来实现这一功能，特别是当涉及到动态调整时，例如通过`resize`事件监听浏览器窗口的变化。 1. **CSS居中布局**： - **Flexbox**：CSS3中的弹性盒模型允许我们轻松地...
在这个例子中，监听的是"resize"事件，当用户调整浏览器窗口大小时触发。 2. **设备像素比（devicePixelRatio）**： - `window.devicePixelRatio` 是一个表示设备物理像素与CSS像素之间比例的属性。在大多数现代...
在前端开发中，经常需要获取浏览器窗口的大小，以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性。 #### 一、基本概念 在...
- **window.resizeTo(width, height)**: 调整窗口大小。 #### 14.4 显示对话框 - **alert(message)**: 显示一个警告对话框，包含一个OK按钮。 - **confirm(message)**: 显示一个确认对话框，包含OK和Cancel按钮。...
本篇文章将详细讲解一个利用jQuery实现的响应式图片排列代码，该代码旨在使图片画廊根据浏览器窗口大小自动调整布局，以达到视觉上的统一和和谐。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、...