先上图吧

来上代码

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

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

     //获得window的大小,主要因为在移动设备IE游览器上有区别
//移动IE游览器不支持inner client
//可以通过document.documentElement.client获得
//compatMode判断兼容模式是否开启
function windowClientXY(){
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != 'number'){
if(document.compatMode == 'CSS1Compat'){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
return console.log("宽-" + pageWidth + ",高-" +pageHeight);
}
windowClientXY(); //分别封装
function windowClientX(){
var pageWidth = window.innerWidth;
if(typeof pageWidth != 'number'){
if(document.compatMode == 'CSS1Compat'){
pageWidth = document.documentElement.clientWidth;
}else{
pageWidth = document.body.clientWidth;
}
}
return windowClientX = pageWidth
}
console.log(windowClientX()); function windowClientY(){
var pageHeight = window.innerHeight;
if(typeof pageWidth != 'number'){
if(document.compatMode == 'CSS1Compat'){
pageHeight = document.documentElement.clientHeight;
}else{
pageHeight = document.body.clientHeight;
}
}
return windowClientY = pageHeight
}
console.log(windowClientY());

[browser window窗口大小 算是screen补充吧]主要因为移动IE游览器 写了个兼容的更多相关文章

  1. Embedding Flash Fullscreen in the Browser Window

    For Developers‎ > ‎Design Documents‎ > ‎ Embedding Flash Fullscreen in the Browser Window Auth ...

  2. Centering window on the screen

    The following script shows how we can center a window on the desktop screen. #!/usr/bin/python # -*- ...

  3. UI Framework-1: Browser Window

    Browser Window The Chromium browser window is represented by several objects, some of which are incl ...

  4. Personalize Oracle Applications Home Page Browser Window Title

    修改登录页 http://expertoracle.com/2016/03/10/personalizing-the-e-business-suite-r12-login-page/ STEP 2 : ...

  5. [browser navigator],写了个检测游览器版本

    前些天胃不舒服打吊针了,真得准时吃饭各种啊,然后就是懒,就没在复习了,这次复习的内容是navigator //未知效果 // console.log('浏览器的次要版本' + navigator.ap ...

  6. 《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象

    如果要在web中使用JAVASCRIPT,那么BOM(浏览器对象模型)毫无疑问是最重要的部分.BOM提供了很多对象,例如,window.location.navigator.screen.histor ...

  7. JS BOM基础 全局对象 window location history screen navigator

    全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...

  8. 获取window窗口大小

    窗口大小 跨浏览器确定一个窗口的大小不是一件简单的事.IE9+.Firefox.Safari.Opera和Chrome均为此提供了4个属性:innerWidth.innerHeight.outerWi ...

  9. Browser Window

    Window 对象 Window对象表示浏览器中打开的窗口. 如果文档包含框架(iframe或iframe标签),浏览器会被html文档创建一个window对象,并为每个框架创建一个额外的window ...

随机推荐

  1. 松软科技Web课堂:JavaScript Break 和 Continue

    break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...

  2. HTTP认知(请求与响应)

    web的工作是:浏览器发送请求报文 + 服务端返回响应报文 通俗的说一下web工作的一个流程: 浏览器向服务端发送HTTP请求报文:这条请求报文组成由请求行.请求头.请求体三大部分组成: 1.请求行 ...

  3. 解决mysql导入数据量很大导致失败及查找my.ini 位置(my.ini)在哪

    数据库数据量很大的数据库导入到本地时,会等很久,然而等很久之后还是显示失败: 这是就要看看自己本地的没mysql是否设置了超时等待,如果报相关time_out这些,可以把mysql.ini尾部添加ma ...

  4. 记一个AbstractMethodError

    如下,引入FastJsonHttpMessageConverter 之后,导致了新的错误: @Override public void configureMessageConverters( List ...

  5. puppeteer开发

    Chromium下载问题 https://github.com/GoogleChrome/puppeteer/ https://download-chromium.appspot.com/?platf ...

  6. MySql数据库基础之数据库简介及安装

    MySql数据库简介: 众所周知,MySql数据库是一款开源的关系型数据库,在Web应用方面,MySql是最好的.最流行的RDBMS(Relational Database Management Sy ...

  7. 物联网架构_对AWS的Greengrass的认识与理解

    物联网架构_对AWS的Greengrass的认识与理解 一,前言: 这段时间有许多的收获,分析,还有总结,其中包括新系统的设计与开发,以及其中新技术的踩坑等等等. 但是最近真的很忙,项目的推进,面试工 ...

  8. .NET Core 轻量级模板引擎 Mustachio

    一. 前言 Mustachio 是一款轻量级且强大的模板引擎,可以用在网页渲染.代码生成器等需要模板引擎的场景.我用它是用在配置文件模板化的场景,在配置文件里面编写一些模板语法,然后从 Cloud 拉 ...

  9. Linux - CentOS 7 通过Yum源安装 Nginx

    添加源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.no ...

  10. 基于Git的数据库sql文件的管理——完美解决团队sql操作协同问题

    目录 基于Git的数据库sql文件的管理--完美解决团队sql操作协同问题 1.产生背景 2.之前没用Git管理数据库出现的问题 2.1 用同一个库调试带来的问题 3.解决方案 3.1 Sql文件的创 ...