zoukankan      html  css  js  c++  java
  • 小结js屏幕、浏览器、页面大小

        快放假过年了,公司最近也不忙,都在打酱油,趁这几天闲下来的时间,整理巩固一下相关疑问点,一直以来,对于js获取网页上的各种窗口大小,一直没有非常明确的理解和记忆,很多时候都是度娘和谷哥来解决,这次花了两天时间,在五种浏览器下分别进行了测试调试(分别是:IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1),整理自己的理解。

    本文地址:http://www.cnblogs.com/vnii/archive/2012/01/13/2320842.html

    声明:一下结论均是在标准模式<!DOCTYPE HTML> 下的测试结果,且测试浏览器分别为Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1,以下为书写方便,分别描述为IE、Chrome、FireFox、Opera、Safari,不写版本号。

    测试HTML
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE>Browser Size Test</TITLE>
    <style>
    body div
    {
    position
    :absolute;
    border
    :solid 1px #ff0000;
    width
    :1500px;
    height
    :1500px;
    filter
    :alpha(Opacity=80);
    -moz-opacity
    :0.5;opacity: 0.5;z-index:100;
    }
    </style>
    </HEAD>

    <BODY>
    <div>测试</div>
    <br/>1
    <br/>2
    <br/>3
    <br/>4
    <br/>5
    <br/>6
    <br/>7
    <br/>8
    <br/>9
    <br/>10
    <br/>
    <br/>
    <br/>
    <br/>00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000测试测试测试测试测试测试测试测试测试测试测试
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>......
    </BODY>
    </HTML>

    js代码以及对于说表示的值如下:

    //------页面内容宽度、高度--------
    alert(document.body.scrollWidth);
    //其中IE Firefox Opera:不识别绝对定位absolute的宽度,仅表示“非绝对定位”内容的宽度,且当浏览器可用宽度>“非绝对定位”内容宽度时候,表示的和offsetWidth相同,即=浏览器可用宽度-body的margin值-滚动条宽度
    //其中Chrome Safari:页面内所有内容的宽度,且当浏览器宽度>所有内容宽度时候,表示的宽度为=浏览器可用宽度-滚动条宽度

    alert(document.body.scrollHeight);
    //IE Firefox Opera:不识别绝对定位absolute的容器高度,仅表示页面内“非绝对定位”内容的高度;
    //Chrome Safari:页面内所有内容的高度,且当浏览器可用高度>所有内容高度时候,表示为浏览器高度

    //[Begin新增 2012.1.16 14:40]
    //此处结合上面的body.scrollXxx就可以给出 整个网页的大小=Max(document.body.scrollXxx,document.documentElement.scrollXxx)
    //------网页文档对象宽度、高度--------
    alert(document.documentElement.scrollWidth);
    //IE Firefox Opera:页面内所有内容的宽度,且当浏览器宽度>所有内容宽度时候,表示的宽度为=浏览器可用宽度-滚动条宽度
    //Chrome Safari:不识别绝对定位absolute的宽度,仅表示“非绝对定位”内容的宽度,且当浏览器可用宽度>“非绝对定位”内容宽度时候,表示宽度=浏览器可用宽度-滚动条宽度
    alert(document.documentElement.scrollHeight);
    //IE Firefox Opera:页面内所有内容的高度,且当浏览器可用高度>所有内容高度时候,表示为浏览器高度
    //Chrome Safari:不识别绝对定位absolute的容器高度,仅表示页面内“非绝对定位”内容的高度;
    //[End新增]


    //------页面内容宽度、高度--------
    alert(document.body.offsetWidth);
    //页面内容宽度=浏览器可用宽度-body的margin值-滚动条宽度,其中滚动条没有时表示0
    alert(document.body.offsetHeight);
    //页面内容高度,均不识别绝对定位absolute的容器高度,仅表示页面内“非绝对定位”内容的高度


    //------浏览器内容可见区域大小--------
    alert(document.documentElement.clientWidth);
    //浏览器内容可见区域宽度-滚动条宽度
    alert(document.documentElement.clientHeight);
    //浏览器内容可见区域高度-滚动条宽度

    //------滚动条偏离大小--------
    alert(document.body.scrollTop);
    //Chrome Firefox Safari Opera支持,滚动条滚动的高度
    alert(document.body.scrollLeft);
    //Chrome Firefox Safari Opera支持,滚动条滚动的左右位移
    alert(document.documentElement.scrollTop);
    //IE支持,滚动条滚动的高度
    alert(document.documentElement.scrollLeft);
    //IE支持,滚动条滚动的左右位移

    //------浏览器可用区域大小--------
    alert(window.innerWidth);
    alert(window.innerHeight);
    //ie:浏览器可用区域大小,滚动条无影响 [修正 2012.1.16 15:15](IE8 以及以前 都不支持,结果为undefined)
    //Chrome Firefox Safari Opera:浏览器可用区域大小,滚动条无影响

    //------屏幕大小--------
    alert(window.screen.availWidth);
    alert(window.screen.availHeight);
    //当前屏幕大小(可用区域),window.screen.height减去任务栏等所占的大小

    //------屏幕大小--------
    alert(window.screen.width);
    alert(window.screen.height);
    //当前屏幕大小(分辨率值)

    本来打算画个图来说明的,发现ps没装。。。其它的图片处理工具也不太好画,所以暂时就以上面的文字描述为主,后续有时间再画个图上传进行说明。

    以上有不同结果或者描述补充的,请大家不吝指教。。。

  • 相关阅读:
    hdu 1372 Knight Moves
    hdu 1253 胜利大逃亡
    nyoj 737 石子合并 经典区间 dp
    nyoj 737 石子合并 http://blog.csdn.net/wangdan11111/article/details/45032519
    nyoj 55 懒省事的小明
    C++ STL priority_queue
    Code forces363D Renting Bikes
    性能测试分享:jmeter性能监控(一)
    性能测试培训:WebSocket协议的接口性能之Jmeter
    翻译一篇文章:It's Difficult to Grow a Test Developer(成为测试开发工程师的艰辛)
  • 原文地址:https://www.cnblogs.com/vnii/p/2320842.html
Copyright © 2011-2022 走看看