[browser window窗口大小 算是screen补充吧]主要因为移动IE游览器 写了个兼容
先上图吧
来上代码
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游览器 写了个兼容的更多相关文章
- Embedding Flash Fullscreen in the Browser Window
For Developers > Design Documents > Embedding Flash Fullscreen in the Browser Window Auth ...
- Centering window on the screen
The following script shows how we can center a window on the desktop screen. #!/usr/bin/python # -*- ...
- UI Framework-1: Browser Window
Browser Window The Chromium browser window is represented by several objects, some of which are incl ...
- Personalize Oracle Applications Home Page Browser Window Title
修改登录页 http://expertoracle.com/2016/03/10/personalizing-the-e-business-suite-r12-login-page/ STEP 2 : ...
- [browser navigator],写了个检测游览器版本
前些天胃不舒服打吊针了,真得准时吃饭各种啊,然后就是懒,就没在复习了,这次复习的内容是navigator //未知效果 // console.log('浏览器的次要版本' + navigator.ap ...
- 《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象
如果要在web中使用JAVASCRIPT,那么BOM(浏览器对象模型)毫无疑问是最重要的部分.BOM提供了很多对象,例如,window.location.navigator.screen.histor ...
- JS BOM基础 全局对象 window location history screen navigator
全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...
- 获取window窗口大小
窗口大小 跨浏览器确定一个窗口的大小不是一件简单的事.IE9+.Firefox.Safari.Opera和Chrome均为此提供了4个属性:innerWidth.innerHeight.outerWi ...
- Browser Window
Window 对象 Window对象表示浏览器中打开的窗口. 如果文档包含框架(iframe或iframe标签),浏览器会被html文档创建一个window对象,并为每个框架创建一个额外的window ...
随机推荐
- 分布式系统的发展演变以及RPC简介
场景 什么是分布式系统 分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统. 分布式系统是建立在网络之上的软件系统. 注: 博客: https://blog.csdn.net/b ...
- 解决在IE11浏览器下,JQuery的AJAX方法不响应问题
在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...
- 【iOS翻译】App启动时的响应过程
Responding to the Launch of Your App Initialize your app’s data structures, prepare your app to run, ...
- 腾讯云推出一站式 DevOps 解决方案 —— CODING DevOps
在产业互联网的大背景下,如何将人工智能.大数据等前沿技术与实体产业相结合,推动传统企业转型升级,已经成为每一个企业不得不思考的问题.落后的软件研发能力已经拖慢了中国大量企业的数字化转型进程. 为了满足 ...
- .NET机器学习 ML.NET 1.4预览版和模型生成器更新
ML.NET 是面向.NET开发人员的开源和跨平台机器学习框架. ML.NET 还包括Model Builder (一个简单的UI工具)和 CLI ,使用自动机器学习(AutoML)构建自定义 ...
- 关于c# winform 键盘响应右边键盘消息响应事件的上下左右方向键没有反应
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11835642.html 记录一下这个小坑,c# winform 键盘响应右边键盘的上下左右方向 ...
- Cocos Creator | 炮弹发射效果模拟
一.预览效果 二.设置物理世界属性: 1.打开物理系统: cc.director.getPhysicsManager().enabled = true; 2. 配置重力加速度: cc.direct ...
- LeetCode刷题191121
博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 数据库: 编写一个 SQL 查询,来删除 Person 表中所有重复的电 ...
- Hive 时间函数总结【转】
1.日期函数UNIX时间戳转日期函数: from_unixtime语法:from_unixtime(bigint unixtime[, stringformat]) 返回值: string说明: 转化 ...
- Struts2.0
流程详解: 配置详解: constant (常用常量配置) 使用Struts2 框架 ,先要导入Struts2 需要的jar 包 , 通过配置中央控制器 以及web.xml 来实现 Str ...