写道
var getWinHeight = function() {
var winHeight;
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; }
return winHeight;
}
注意要点:
1.如果你发现你的页面上没有这一句话<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
那么这时候 document.body.clienHeight 为工作区的高度
否则 加了这一句的话那么 document.body.clienHeight 就只是body 标签的高度 , 这时候应该要用 document.documentElement &&
document.documentElement.clientHeight &&
document.documentElement.clientWidth 来判断 因为这时候
document.documentElement.clientHeight 就是工作区的高度了
因此这个方法是分别判断了 不同标准下 不同浏览器的工作区高度值
document.documentElement (就是HMTL标签)在FF下请加上标准约束
分享到:
相关推荐
在 Web 开发中,获取浏览器的高度和宽度值是非常重要的,因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而,浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别。在本文中,我们将讨论如何在不同...
- `window.screen.availHeight` 和 `window.screen.availWidth` 提供了屏幕可用的工作区高度和宽度,不包括任务栏和其他非用户交互区域。 在实际开发中,为了确保代码的兼容性,通常会使用条件语句或者库如jQuery来...
s += "屏幕可用工作区高度:" + window.screen.availHeight + " "; s += "屏幕可用工作区宽度:" + window.screen.availWidth + " "; s += "你的屏幕设置是" + window.screen.colorDepth + "位彩色 "; ...
在JavaScript中,获取浏览器的高度和宽度是常见的需求,这有助于我们进行页面布局、响应式设计或者自适应调整。本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 ...
- `window.screen.availHeight`:返回屏幕可用的工作区高度,即用户可以用来显示内容的区域,不包括任务栏等系统界面。 - `window.screen.availWidth`:返回屏幕可用的工作区宽度。 5. **事件坐标**: - `event....
- **window.screenTop** 和 **window.screenLeft**: 分别获取浏览器窗口相对于整个屏幕左上角的垂直和水平距离,单位为像素。 - **window.screen.height** 和 **window.screen.width**: 分别获取用户的显示器的高度...
通常情况下,如果需要使用jQuery框架来实现相关功能,可以利用jQuery提供的尺寸获取方法,如$(window).height()和$(window).width()来获取浏览器窗口的可视区域高度和宽度。$(document).height()和$(document).width...
对于屏幕分辨率和工作区,`window.screen.height`和`window.screen.width`提供了屏幕分辨率的高度和宽度,而`window.screen.availHeight`和`window.screen.availWidth`提供了屏幕可用工作区的高度和宽度。工作区是指...
- `window.screen.availHeight` 和 `window.screen.availWidth`: 提供了屏幕可用的工作区高度和宽度,即排除了任务栏和其他屏幕元素后的空间。 5. **HTML元素定位**: - `scrollHeight`, `scrollLeft`, `...
此外,window.screen.availWidth和window.screen.availHeight可以得到屏幕的可用工作区宽度和高度,这通常是屏幕总分辨率去掉任务栏和操作系统其他界面元素后剩余的部分。 对于页面元素的尺寸,可以使用document....
- window.screen.availHeight:获取屏幕可用工作区的高度,不包括系统任务栏和界面元素。 - window.screen.availWidth:获取屏幕可用工作区的宽度,不包括系统任务栏和界面元素。 5. 获取滚动位置: - window....
`window.screen.availHeight`则是屏幕可用的工作区高度,不包括任务栏和其他系统元素。 总结起来,通过jQuery和JavaScript,我们可以轻松地获取浏览器窗口、文档以及屏幕的各种尺寸信息,从而更好地优化网页布局,...
- 计算出浏览器窗口的工作区高度(即浏览器视口高度减去顶部和底部元素的高度): ```javascript var height1 = window.screen.availHeight - (window.screenTop + (window.screen.height - window.screen....
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先,我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
- `window.screen.availHeight`:获取屏幕可用工作区的高度,不包括任务栏等占用部分。 对于网页元素的宽高信息,常用的有: - `document.body.clientWidth`:网页可见区域的宽度,不包括边框和滚动条。 - `...
- 描述:返回屏幕可用工作区的高度,不包括被系统任务栏等占去的高度。 - 使用场景:确定页面内容在实际可用屏幕区域的高度。 14. **window.screen.availWidth** - 描述:返回屏幕可用工作区的宽度,不包括被...
s += "屏幕可用工作区高度:" + window.screen.availHeight; s += "屏幕可用工作区宽度:" + window.screen.availWidth; s += "你的屏幕设置是 " + window.screen.colorDepth + " 位彩色"; s += "你的屏幕设置 ...