Javascript获取屏幕分辨率、当前浏览器窗口大小

var w=document.documentElement.clientWidth;
      var h=document.documentElement.clientHeight;
      alert(w+" "+h);

在控制台上输入如上语句即可



 document.documentElement.clientWidth 和 document.documentElement.clientHeight 是获取浏览器当前窗口视图区域(也就是说不包括工具栏、滚动条等)的实际宽高(旧的HTML标准是写作document.body.clientWidth/clientHeight,已过时,建议大家用新标准来描述):



手头一个项目,需要对屏幕分辨率进行检测,同时对窗口大小改变进行监测,窗口大小改变则css样式跟随变化。又是坑爹的IE不遵守游戏规则,要兼容ie系列,还得做多方面的兼容性处理。

    以下是找到的获取窗口大小的一些知识点:

    1、 Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。 

    2、 Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示 HTML文档的根节点。 

    3、document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

    一、获取窗口大小,直接上代码:

var winWidth = 0;
var winHeight = 0;
function findDimensions()
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
return {
'width': winHeight,
'height': winWidth
};
}

    二、获取屏幕分辨率

    screen对象即可直接获取到当前显示器的分辨率

    分辨率宽:screen.width

    分辨率高:screen.height 

 客户区大小

    我们可以如此编码获取其客户区的大小:

function getViewport() {
	if (document.compatMode == "BackCompat") {
		return {
			width: document.body.clientWidth,
			height: document.body.clientHeight
		};
	} else {
		return {
			width: document.documentElement.clientWidth,
			height: document.documentElement.clientHeight
		};
	}
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值