先上图吧

来上代码

     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. 批量SSH key-gen无密码登陆认证脚本

    SSH key-gen无密码登录认证脚本 使用为了让linux之间使用ssh不需要密码,可以采用了数字签名RSA或者DSA来完成.主要使用ssh-key-gen实现. 通过 ssh-key-gen 来 ...

  2. 直击KubeCon北美峰会:开发者们不得不关注的10大项目

    今天晚上8:30,第三期在线培训<如何通过Istio进行金丝雀发布>将准时开播,内容包括Istio原理.金丝雀发布.在Rancher中启用Istio,报名及观看链接:https://www ...

  3. vue项目的开发

    vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...

  4. Xamarin.Forms 界面布局

    <!--margin表示控件相对StackLayout的位置是设置组件之间的距离,或者距离父组件边缘的距离,    他的四个值是左边距,上边距,右边距,下边距  -->    <!- ...

  5. Redis简单命令(部分示例代码)

    一.redis文件夹下的可执行文件(文章尾部有示例代码) 可执行文件 作用 redis-server 启动redis redis-cli redis命令行工具 redis-benchmark 基准测试 ...

  6. Please ensure the argon2 header and library are installed

    在CentOS上安装libargon2和libargon2-devel即可 yum install -y libargon2 libargon2-devel

  7. Java并发的若干基本陷阱、原理及解决方案

    勿止于结论:持续探索与求证. 概述 为什么要使用并发 ? 有三点足够信服的理由: 性能提升.单核 CPU 的性能基本抵达瓶颈,充分挖掘多核 CPU 的能力,使得性能提升变成水平可扩展的. 事件本质.世 ...

  8. abp大文件附件功能视频教程

    视频分享地址:https://share.weiyun.com/5wtofib

  9. WPF炫酷UI及动画

    偶然看见了一张图,感觉挺好看的,花了点时间将他转化成了我代码仓库的一部分.虽然不难但也费时间.其中除了背景是百度的一张底图,其他所有内容均通过WPF的Path.Line.TextBlock.Borde ...

  10. FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed

    The header and footer in the tweet embed example have child items that could be arranged as rows usi ...