zoukankan      html  css  js  c++  java
  • 获取浏览器可视屏幕宽度

    1.各浏览器

    // 360
    innerWidth=outerWidth    //窗口宽度
    innerHeight=outerHeight  //窗口高度  (仅白色body区域,不包顶部和尾部状态栏)
    
    // chrom
    innerWidth=outerWidth    //窗口宽度
    innerHeight!=outerHeight  //窗口高度  
    innerHeight 是白色body区域
    outerHeight 是body+顶部地址栏等的高度
    
    //ie8
    alert(innerWidth)  // ie 无法识别该属性,报错,应写成window.innerWidth; 但也无法得出宽度,返回undefined
    
    
    //Firefox
    
    innerWinth=outerWinth  //基本相等,但有10几像素误差 ?
    innerHeight  //body的高度
    outerHeight  //body +顶部地址栏等高度+状态栏, 有几像素误差 ?

    2.获取body的宽、高方法

    var width = window.innerWidth; //这里要加window,因为IE 会无效;window.innerWidth在ie浏览器返回undefined
    var height = window.innerHeight;
    
    if (typeof width != 'number') { //如果是IE,就使用document
        if (document.compatMode == 'CSS1Compat') {  //标准模式
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        } else {
            width = document.body.clientWidth;  //非标准模式使用body
            height = document.body.clientHeight;
        }
    }
    alert(width);  
    alert(height);      
    //是ie则进入if语句,再判断是标准还是非标准  ,其他浏览器直接根据变量得出宽高

     3.窗口的位置

    //ie支持,火狐不支持:
    alert(screenLeft); 
    alert(screenTop);
    alert(typeof screenLeft); //ie支持,返回number;不支持的返回undefined
    
    //火狐支持,ie不支持:
    alert(screenX);
    alert(screenY);
    
    
    //跨浏览器兼容:
    var leftX=(typeof screenLeft=="number")?screenLeft:screenX;
    var topY=(typeof screenTop=="number")?screenTop:screenY;
    

      

  • 相关阅读:
    CentOS 配置自启动Redis
    WPF Popup全屏 弹出方法。解决只显示75%的问题。
    UpdatePanel控件的使用和局部刷新
    关于width与padding
    WPF 快捷方式
    深入浅出WPF——附加事件(Attached Event)
    控件属性使用代码动代绑定
    ICommand.CanExecuteChanged事件订阅对象的变化
    输入德文出现乱码现象的处理方法
    MVVM 模版里的控件怎样触发命令
  • 原文地址:https://www.cnblogs.com/luhailin/p/6595224.html
Copyright © 2011-2022 走看看