[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 ...
随机推荐
- python——模块(Module)的概念、使用以及安装第三方模块
一.模块定义 python中,一个.py文件就是一个模块(Module). 使用模块的好处:1.提高了代码的可维护性.我们把函数进行分组,分别放在不同的模块中.2.编写代码不必要从0开始,当一个模块编 ...
- 分布式事物 - 基于RPC调用 - TCC模式
前提 前端业务(主服务)可以以同步或异步调用TCC框架,或者TCC框架本身就是同步异步兼备的. 假定TCC框架拥有断电后的自动恢复能力.同时,在下游业务出现无限失败的情况下,也会进行无限的重试,以达到 ...
- wx-icon和progress
基本内容 index.wxml <!--index.wxml--> <view class="container"> <!--icon text pr ...
- HTTP_header安全选项(浅谈)
HTTP报文头-安全问题 Mirror王宇阳 2019-10-01 参考:MDN技术文档:<http头安全相关的选项_by`myh0st> 认识HTTP协议 https://www.cnb ...
- Flutter学习笔记(28)--使用第三方jar包
如需转载,请注明出处:Flutter学习笔记(28)--使用第三方jar包 1.打开一个Flutter项目,点击编码窗口右上角的Open for Editing in Android Studio,这 ...
- Python中删除空白字符
主要参考 Stackoverflow答案总结. 空白字符一般指以下几种字符: space,tab, linefeed, return, formfeed, and vertical tab中英文对照表 ...
- 是时候扔掉 Postman 了,试试 IntelliJ IDEA 自带的高能神器!
前言 接口调试是每个软件开发从业者必不可少的一项技能,一个项目的的完成,可能接口测试调试的时间比真正开发写代码的时间还要多,几乎是每个开发的日常工作项.所谓工欲善其事必先利其器,在没有尝到 IDEA ...
- SpringBoot源码篇:Spring5内置tomcat实现code-based的web.xml实现
一.简介 上篇文章讲了SpingBoot诞生的历史背景和技术演进背景,并通过源码说明了SpringBoot是如何实现零配置的包括如何省去web.xml配置的原理.本文接上一篇文章,通过demo演示Sp ...
- Rancher2.x流水线自动化部署
1.概述 由于一些项目使用了rancher进行部署发布,所以使用Rancher的流水线自动部署功能实现CICD,从gitlab.harbor安装,到流水线配置和中间的一些问题一一进行详细介绍解答. 2 ...
- (转)两种高效过滤敏感词算法--DFA算法和AC自动机算法
原文:https://blog.csdn.net/u013421629/article/details/83178970 一道bat面试题:快速替换10亿条标题中的5万个敏感词,有哪些解决思路? 有十 ...