zoukankan      html  css  js  c++  java
  • 窗口大小

    一  窗口(Window) 大小,即浏览器的窗口大小

    1 outerWidth, outerHeight

    Safari,Firefox,Chrome中 outerWidth和outerHeight 返回浏览器窗口本身的尺寸。

    方法:window.outerWidth, window.outerHeight

    2 IE没有提供,Opera呢?

    看jQuery有没有提供这个兼容写法。

    二  视口(Viewport)大小

    视口网页内容可显示区域的大小,这个比较常用,如响应式设计,计算出视口的大小看效果是否符合。

    一个代码例子展示一下。

    var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;
    
    if (typeof pageWidth != "number") {
    // 判断是否是标准模式 if (document.compatMode == "CSS1Compat" ) { pageWidth = document.documentElement.clientWidth; pageHeight = document.documnetElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }

    document.compatMode IE6率先先加入的,现在Firefox,Opera,Chrome,Safari都有了。

    唯一作用:标志浏览器处于什么模式。

    值CSS1Compat表示标准模式,BackCompat表示混杂模式。

    三 调整浏览器窗口的大小

    resizeTo(), resizeBy()

    resizeTo(x, y) 调整到x,y大小。

    resizeBy(x, y) x,y 是新窗口与原窗口宽度和高度之差。

    三 调整窗口大小

    四 jQuery获取尺寸的方法

    jQuery中获取尺寸有三个分类,height, innnerHeight, outerHeight

    height 元素高度

    innerHeight = height+padding

    outerHeight = innerHeight+border

    实例:

    $(window).height() 可视窗口的高度,即前面的视口(Viewport)大小。

    $(document).height() 当前文档的高度,即这个页面所有内容的高度。

  • 相关阅读:
    “TensorFlow 开发者出道计划”全攻略,玩转社区看这里!
    魔改合成大西瓜
    自定义注解!绝对是程序员装逼的利器!!
    Python中的join()函数的用法
    Python中的split()函数的用法
    linux 完全卸载mysql数据库
    域名被盗后还能不能找回
    在选择域名后缀时应该考虑到的问题
    什么叫域名劫持 和域名解析有什么区别
    河北重大技术需求系统04
  • 原文地址:https://www.cnblogs.com/zzu-han/p/3163744.html
Copyright © 2011-2022 走看看