js得到屏幕宽高、页面宽高 (window.screen.availHeight)等

最新推荐文章于 2023-08-07 09:57:17 发布
最新推荐文章于 2023-08-07 09:57:17 发布
阅读量1.1k 收藏
点赞数
分类专栏： JS 文章标签： js 屏幕宽高 页面宽高
本文介绍了如何使用JavaScript获取屏幕的实际分辨率与可用区域大小，以及如何获取当前网页的高度和宽度。具体包括window.screen.width、window.screen.height、window.screen.availWidth、window.screen.availHeight、window.document.body.offsetHeight和window.document.body.offsetWidth等属性。

终于能分清楚这些区别了

window.screen.availWidth 返回当前屏幕宽度(空白空间) 

window.screen.availHeight 返回当前屏幕高度(空白空间) 
window.screen.width 返回当前屏幕宽度(分辨率值) 
window.screen.height 返回当前屏幕高度(分辨率值) 
window.document.body.offsetHeight; 返回当前网页高度 
window.document.body.offsetWidth; 返回当前网页宽度
JavaScript技巧：获取屏幕宽高的方法
laugh666的博客
10-10 1126
window对象提供了innerWidth和innerHeight属性，可以用来获取浏览器窗口的内部宽度和高度，即排除滚动条的宽度。window对象的outerWidth和outerHeight属性表示浏览器窗口的外部宽度和高度，包括边框和滚动条的宽度。需要注意的是，以上方法获取的屏幕宽高可能会因为浏览器窗口的大小、缩放或其他因素而有所不同。document对象的documentElement属性表示整个文档的根元素，可以通过该属性获取文档的宽度和高度。如有任何疑问，请随时提问。
【002JavaScript Window Screen】JavaScript Window Screen：屏幕信息获取与利用指南
燃正科技
06-08 521
本教程将详细介绍 JavaScript 中的 Window Screen 对象，该对象提供了有关用户屏幕的信息和功能。通过 Window Screen 对象，您可以获取屏幕的尺寸、颜色深度、方向等信息，并执行一些与屏幕相关的操作。
JS或jQuery获取当前屏幕宽度
kkhk04的博客
07-30 468
原文地址：https://www.cnblogs.com/mlw1814011067/p/9504282.html Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： docu...
JS获取屏幕宽高
山外小楼
01-17 4564
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
js或jQuery获取当前屏幕的各种高度
热门推荐
zzqworkspace的博客
05-25 4万+
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.
前端js获取屏幕高度
夜空繁星VV
01-09 2483
1.浏览器的内部窗口宽度（兼容写法）：window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 浏览器的内部窗口高度（兼容写法）：window.innerHeight || document.documentElement.clientHeight || document.body.cli...
详解JavaScript编程中的window与window.screen对象
09-21
JavaScript编程中的`window`与`window.screen`对象是Web开发中的基础概念，尤其是在浏览器环境中。`window`对象是JavaScript全局作用域的核心，它代表了用户浏览器窗口本身，包含了所有浏览器提供的全局对象、函数和...
js 获取屏幕各种宽高的方法(浏览器兼容)
10-27
在Web开发中，获取屏幕和网页元素的各种宽高信息是常见的需求，以便进行页面布局、元素定位和动态调整等操作。JavaScript为此提供了丰富的接口，但不同的浏览器对这些接口的支持度有所差异，这就要求开发者编写兼容...
详解js动态获取浏览器或页面等容器的宽高
10-17
13. **window.screen.availHeight** - 描述：返回屏幕可用工作区的高度，不包括被系统任务栏等占去的高度。 - 使用场景：确定页面内容在实际可用屏幕区域的高度。 14. **window.screen.availWidth** - 描述：...
javascript获取网页宽高方法汇总
10-23
屏幕色彩深度可以通过window.screen.colorDepth获取，屏幕设备的像素密度可以通过window.screen.deviceXDPI获得，但这个属性在IE外的浏览器中不支持。 在JavaScript中获取页面宽高的一个示例代码如下： ```...
js获取屏幕分辨率的方法
11-28
js获取屏幕分辨率的方法有利于div自适应窗口大小。
js获取笔记本屏幕的分辨率以及缩放到125%工作区域的高度
IT博客技术分享
10-12 2581
【代码】js获取笔记本屏幕的分辨率以及缩放到125%工作区域的高度。
JS获取屏幕分辨率 及 窗口尺寸
偏执
08-07 2465
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；Document对象的body属性对应HTML文档的标签。event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量。网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域宽：document.body.offsetWidth (包括边线的宽)
js获取电脑分辨率不同的时候给div设置不同的高度
笑到世界都狼狈的博客
03-13 992
项目中有遇到类似的问题，是通过获取分辨率进行修改的，记录一下。 /** * 分辨率高度小于900时高度变小 * @type {number} */ var windowsHeight = window.screen.height;//屏幕分辨率高度 var dialogHeight = 0;//声明一个变量，高度 if (windowsHeight > 900){ dial...
前端 解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响
localhost
12-31 9532
前端 解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响
解决前端页面在笔记本和台式显示器比例大小不一问题（适配笔记本125% 150%缩放解决方法）
小匠的Blog
06-13 5746
适配笔记本125% 150%缩放解决方法
宽度和高度-js-引
十年一剑
06-09 822
// alert(document.body.scrollHeight); // alert(document.body.scrollTop);// alert(document.documentElement.scrollTop);alert(document.body.clientWidth);alert(document.body.scrollHeight);/* w   =docum
JS对象 window对象 屏幕可用高和宽度 1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。 2. screen.availHeight 属...
weixin_30545285的博客
06-16 237
屏幕可用高和宽度 1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。 2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。 注意: 不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。 ...
window.screen.availWidth
weixin_58414196的博客
07-05 799
window.screen.availWidth
Sub Window_OnLoad self.ResizeTo 320, 180 screenWidth = window.screen.availWidth screenHeight = window.screen.availHeight posLeft = (screenWidth - 320) / 2 posTop = (screenHeight - 180) / 2 self.MoveTo posLeft, posTop End Sub 这段代码什么意思
最新发布
08-15
<think>这段代码是VBScript（Visual Basic Script）代码，通常用于早期的网页脚本（如Internet Explorer）或Windows脚本宿主（WSH）环境。它定义了一个名为`Window_OnLoad`的子程序（Sub），当窗口加载时会自动执行。 ### 代码功能解释： 1. **`self.ResizeTo 320, 180`**：将当前窗口的宽度调整为320像素，高度调整为180像素。 2. **`screenWidth = window.screen.availWidth`**：获取屏幕的可用宽度（不包括任务栏等区域）。 3. **`screenHeight = window.screen.availHeight`**：获取屏幕的可用高度。 4. **`posLeft = (screenWidth - 320) / 2`**：计算窗口左上角的水平坐标，使窗口在水平方向上居中（窗口宽度为320，所以用屏幕可用宽度减去窗口宽度，然后除以2）。 5. **`posTop = (screenHeight - 180) / 2`**：计算窗口左上角的垂直坐标，使窗口在垂直方向上居中（窗口高度为180）。 6. **`self.MoveTo posLeft, posTop`**：将窗口移动到计算出的位置（居中）。 ### 注意： - 这段代码依赖于`self`对象，在网页环境中，`self`通常指向当前窗口对象。 - `window.screen.availWidth`和`window.screen.availHeight`是浏览器提供的屏幕可用尺寸（去掉任务栏等区域后的尺寸）。 - 这段代码通常放在`<script type="text/vbscript">`标签内，在支持VBScript的浏览器（如旧版IE）中运行。 ### 现代替代方案（JavaScript）： 由于VBScript已逐渐被淘汰，现代网页开发通常使用JavaScript实现类似功能。以下是用JavaScript实现的等效代码： ```javascript window.onload = function() { // 调整窗口大小为320x180 window.resizeTo(320, 180); // 获取屏幕可用宽度和高度 const screenWidth = window.screen.availWidth; const screenHeight = window.screen.availHeight; // 计算居中位置 const posLeft = (screenWidth - 320) / 2; const posTop = (screenHeight - 180) / 2; // 移动窗口到计算的位置 window.moveTo(posLeft, posTop); }; ``` ### 注意事项： 1. 现代浏览器出于安全考虑，可能会限制`resizeTo`和`moveTo`方法的使用，尤其是在非用户触发的脚本中（如页面加载）。因此，这段代码可能无法在所有浏览器中正常运行。 2. 通常，浏览器只允许脚本调整由脚本打开的窗口（即`window.open`打开的窗口），而不是主窗口。 ### 相关问题： §§相关问题§§: 1. VBScript和JavaScript的主要区别是什么？ 2. 在JavaScript中，如何获取浏览器窗口的尺寸（而不是屏幕的可用尺寸）？ 3. 现代浏览器中，如何安全地调整窗口大小和位置？ 4. 如何使一个窗口在打开时就居中显示（使用JavaScript）？</think>这段代码是使用 **VBScript** 编写的（通常用于经典 ASP 或旧版 Internet Explorer），主要功能是在窗口加载时自动调整窗口大小并居中显示。以下是逐行解释： ```vbscript Sub Window_OnLoad ' 定义窗口加载时触发的子程序 self.ResizeTo 320, 180 ' 将窗口大小调整为宽320像素、高180像素 screenWidth = window.screen.availWidth ' 获取屏幕可用宽度（排除任务栏等） screenHeight = window.screen.availHeight ' 获取屏幕可用高度 posLeft = (screenWidth - 320) / 2 ' 计算窗口居中的水平起始位置 posTop = (screenHeight - 180) / 2 ' 计算窗口居中的垂直起始位置 self.MoveTo posLeft, posTop ' 将窗口移动到计算出的居中位置 End Sub ``` ### 关键点说明： 1. **`Window_OnLoad`** 窗口加载事件的处理函数（类似 JavaScript 的 `window.onload`）。 2. **`self.ResizeTo`** 调整窗口尺寸（参数：宽度, 高度）。 3. **`window.screen.availWidth/Height`** 获取屏幕的**可用区域尺寸**（排除任务栏/工具栏）。 4. **居中计算逻辑** ```vbscript posLeft = (屏幕宽度 - 窗口宽度) / 2 ' 水平居中 posTop = (屏幕高度 - 窗口高度) / 2 ' 垂直居中 ``` 5. **`self.MoveTo`** 将窗口移动到指定坐标（参数：X坐标, Y坐标）。 ### 现代 JavaScript 等价实现 如果需要在现代浏览器中实现相同功能，可用以下 JavaScript 代码： ```javascript window.addEventListener('load', () => { // 设置窗口尺寸（仅对弹出窗口有效） window.resizeTo(320, 180); // 计算居中位置 const left = (screen.availWidth - 320) / 2; const top = (screen.availHeight - 180) / 2; // 移动窗口（仅对弹出窗口有效） window.moveTo(left, top); }); ``` ### 注意事项： - **浏览器限制**：现代浏览器出于安全考虑，通常禁止脚本控制主窗口大小/位置（`resizeTo/moveTo` 仅对 `window.open()` 创建的弹出窗口有效）。 - **VBScript 已淘汰**：该语言仅适用于旧版 IE，现代开发请使用 JavaScript。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值