zoukankan      html  css  js  c++  java
  • [browser window窗口大小 算是screen补充吧]主要因为移动IE游览器 写了个兼容

    先上图吧

    来上代码

     1     console.log(window.outerWidth + '--' + window.outerHeight);//只读的整数,声明了整个窗口的XY
     2     //IE 不支持此属性,且没有提供替代的属性。
     3     var width  = window.innerWidth;
     4     var height = window.innerHeight;
     5     console.log("window.inner--" + width+ '--' + height);
     6     console.log('-------------');
     7     var width  = document.documentElement.clientWidth;
     8     var height = document.documentElement.clientHeight;
     9     console.log("document.documentElement.client--" + width + '--' + height);
    10     console.log('-------------');
    11     var width  = document.body.clientWidth;
    12     var height = document.body.clientHeight;
    13     console.log("document.body.client--" + width + '--' + height);
    14     console.log('-------------');
    15     console.log(document.compatMode);//兼容模式是否开启
    16                                      //开启CSS1Compat 否backCompat

    写了个获得移动设备的windowXY JS高设3 P198-199

     1     //获得window的大小,主要因为在移动设备IE游览器上有区别
     2     //移动IE游览器不支持inner client
     3     //可以通过document.documentElement.client获得
     4     //compatMode判断兼容模式是否开启
     5     function windowClientXY(){
     6         var pageWidth  = window.innerWidth;
     7         var pageHeight = window.innerHeight;
     8         if(typeof pageWidth != 'number'){
     9             if(document.compatMode == 'CSS1Compat'){
    10                 pageWidth  = document.documentElement.clientWidth;
    11                 pageHeight = document.documentElement.clientHeight;
    12             }else{
    13                 pageWidth  = document.body.clientWidth;
    14                 pageHeight = document.body.clientHeight;
    15             }
    16         }
    17         return console.log("宽-" + pageWidth + ",高-" +pageHeight);
    18     }
    19     windowClientXY();
    20 
    21     //分别封装
    22     function windowClientX(){
    23         var pageWidth  = window.innerWidth;
    24         if(typeof pageWidth != 'number'){
    25             if(document.compatMode == 'CSS1Compat'){
    26                 pageWidth  = document.documentElement.clientWidth;
    27             }else{
    28                 pageWidth  = document.body.clientWidth;
    29             }
    30         }
    31         return windowClientX = pageWidth
    32     }
    33     console.log(windowClientX());
    34 
    35     function windowClientY(){
    36         var pageHeight = window.innerHeight;
    37         if(typeof pageWidth != 'number'){
    38             if(document.compatMode == 'CSS1Compat'){
    39                 pageHeight = document.documentElement.clientHeight;
    40             }else{
    41                 pageHeight = document.body.clientHeight;
    42             }
    43         }
    44         return windowClientY = pageHeight
    45     }
    46     console.log(windowClientY());
  • 相关阅读:
    树莓派 无线网卡配置
    树莓派.Net MVC4 Mono4 Jexus
    springcloud超简单的入门3--负载均衡
    springcloud超简单的入门2--Eureka服务治理
    SpringCloud超简单的入门(1)--一些简单的介绍
    Tomcat9控制台中文乱码的解决方案
    win10 调整音量时 左上角弹框 的解决办法
    .NETCore 添加Docker支持,并上传镜像至Docker Hub,最后在CentOs中拉取镜像运行
    假设每台交换机上行有N条线,两跳内,可以最多让多少个交换机互通?
    .netcore微服务-SkyWalking安装部署IIS
  • 原文地址:https://www.cnblogs.com/me2o/p/7878374.html
Copyright © 2011-2022 走看看