文档章节

jQuery 获取屏幕高度、宽度

freedonn
 freedonn
发布于 2014/11/07 10:25
字数 321
阅读 448
收藏 3

做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
 
// 获取页面的高度、宽度
function getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else {
        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
        }
    }
    // for small pages with total height less then height of the viewport
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if (xScroll < windowWidth) {
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
}
 
// 滚动条
document.body.scrollTop;
$(document).scrollTop();

本文转载自:http://www.cnblogs.com/hoojo/archive/2012/02/16/2354663.html

freedonn

freedonn

粉丝 25
博文 258
码字总数 16565
作品 0
潍坊
程序员
私信 提问
9 月份最受欢迎的 12 个 jQuery 插件

1. tiltShift.js 一个插件来复制使用CSS3图像过滤器的移轴效果。这是一个概念验证,目前只适用于Chrome浏览器和Safari浏览器6。 2. Responsive Measures Responsive Measure 可帮你给文字设置...

oschina
2012/10/16
7.2K
12
Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式

在前面几篇博客中,我们初步了解了一下jquery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,...

长平狐
2012/11/12
23
0
jQuery中的宽度和高度计算

DOM中宽度高度: window的宽度高度:代表着浏览器的有效可见区域的宽度高度,即浏览器工具栏和任务栏之间的区域,它会随着最大化最小化或改变窗口尺寸的变化而变化,它代表着“视界”。 docu...

i33
2013/03/25
0
0
【JS实践】JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸【PC&ipad】

JS获取各种高度宽度:浏览器窗口滚动条的位置、元素的几何尺寸 1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而...

呢喃的猫咪
2012/12/19
0
3
关于JS、JQ获取可视区域的高度、宽度以及屏幕分辨率的那些事

用JS和JQ获取相关属性 JavaScript document.body.clientWidth;//网页可见区域宽 document.body.clientHeight;//网页可见区域高 document.body.offsetWidth;//网页可见区域宽(包括边框的宽)...

胡洋
2017/03/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

老也有错?35岁程序员是一道坎,横亘在每个技术职场人的心中

随着互联网的高速发展变革,大龄恐惧症越来越多地在技术圈被人讨论。很多程序员在工作5-10年以后,都会开始思考5年、10年甚至更久以后的自己,会是怎样一种生活工作状态,以及是否会被时代抛...

我最喜欢三大框架
7分钟前
0
0
今日头条算法原理详解全集,值得收藏!

今天,算法分发已经是信息平台、搜索引擎、浏览器、社交软件等几乎所有软件的标配,但同时,算法也开始面临质疑、挑战和误解。今日头条的推荐算法,从 2012 年 9月第一版开发运行至今,已经经...

骚年锦时
20分钟前
2
0
零拷贝:用户态视角

在Linux系统越来越多的人听说过所谓的零拷贝技术,但是我经常遇到很多对这个名词没有完全理解的人。因此,我决定写一些文章,深挖这个问题,希望能揭开这个有用的特性。在这篇文章,我们从用...

凌渡
32分钟前
0
0
以太坊中文文档翻译-区块

本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读。 区块(Blocks) 区块相关的 API,接口的参数说明请参考Etherscan API 约定, 文档中不单独...

Tiny熊
40分钟前
2
0
Linux 内核的一个问题

是virtio 驱动,但是没有启动 virtio-mmio virtio-mmio.0: Failed to enable 64-bit or 32-bit DMA. Trying to continue, but this might not work.....[ 1.047924] md: ... autorun......

MtrS
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部