zoukankan      html  css  js  c++  java
  • jQuery 获取屏幕高度、宽度

    做手机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();

    --------

    javascript:

    可视区域宽 :document.documentElement.clientWidth  (width + padding)

    可视区域高 :document.documentElement.clientHeight (height + padding)

    可视区域宽: document.body.offsetWidth (包括边线的宽: width + padding + border)

    可视区域高: document.body.offsetHeight (包括边线的高:height + padding + border)

    内容高 : document.body.scrollHeight

    文档高 : document.body.offsetHeight

    纵向滚动的距离 : document.body.scrollTop || document.documentElement.scrollTop

    横向滚动的距离 : document.body.scrollLeft || document.documentElement.scrollLeft

    jquery:

    可视区域宽  : $(window).width()  

    可视区域高 :$(window).height()

    页面的文档宽 :$(document).width();

    页面的文档高 :$(document).height();

    获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

    获取滚动条到顶部的垂直高度 :$(document).scrollTop();

    ----

    $(window).height()     获取的是当前可视窗口的高度,也就是用户能看到的窗口的高度,是不变的(在窗口大小不变的前提下)
    $(document).height()  获取的是窗口内文档的高度,这个高度随着文档内容的高度改变而改变

    当窗口滚动条滚到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。
    当窗口内文档高度不足浏览器窗口高度时,$(document).height()返回的是$(window).height()。

    $("body").height()   如果body没有border、margin的话,$("body").height()==$(document).height(),但是还是不建议使用这种方式去获取文档内容高度

    PS:如果你发现$(window).height()值有问题,返回的不是浏览器窗口的高度,那么看看是不是网页没有加上<!DOCTYPE>声明。
    如果没加的话网页会进入怪异模式,你懂的!

  • 相关阅读:
    【C++】资源管理
    【Shell脚本】逐行处理文本文件
    【算法题】rand5()产生rand7()
    【Shell脚本】字符串处理
    Apple iOS产品硬件参数. 不及格的程序员
    与iPhone的差距! 不及格的程序员
    iPhone游戏 Mr.Karoshi"过劳死"通关. 不及格的程序员
    XCode V4 发布了, 苹果的却是个变态. 不及格的程序员
    何时readonly 字段不是 readonly 的?结果出呼你想象!!! 不及格的程序员
    object file format unrecognized, invalid, or unsuitable Command 不及格的程序员
  • 原文地址:https://www.cnblogs.com/qufly/p/4622839.html
Copyright © 2011-2022 走看看