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() 当前文档的高度,即这个页面所有内容的高度。

  • 相关阅读:
    【BZOJ 2844】: albus就是要第一个出场
    BZOJ 2631: tree
    BZOJ1798: [Ahoi2009]Seq 维护序列seq
    Link-Cut Tree指针模板
    bzoj 4916: 神犇和蒟蒻 (杜教筛+莫比乌斯反演)
    【BZOJ 3561】 DZY Loves Math VI
    linux 安装php7.2 以及配置laravel环境(public目录下)
    composer 配置 切换中国镜像
    phpstorm composer 提示php 版本过低的问题调整
    如何在阿里云的虚机 部署laravel项目
  • 原文地址:https://www.cnblogs.com/zzu-han/p/3163744.html
Copyright © 2011-2022 走看看