跨浏览器确定一个窗口的大小不是一件简单的事。
IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight。
1、在IE9+、Safari和Firefox中,outerWidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架)。
2、在Opera中,这两个属性的值表示页面视图容器(Opera中单个标签页对应的浏览器窗口)的大小。而innerWidth和innerHeight则表示容器中页面视图区的大小(减去边框宽度)。
3、在Chrome中,outerWidth和outerHeight与innerWidth和innerHeight返回相同的值,即视口(viewport)大小而非浏览器窗口大小。
4、IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性;不过,它通过DOM提供了页面可见区域的相关信息。
还有点知识点还没说,哈哈!!!既然代码重要,理论知识也重要吧!
1、在IE、Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth
和document.documentElement.clientHeight
中保存了页面视口信息。
2、在IE6中,这些属性必须在标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWidth
和document.body.clientHeight
取得相同信息。
3、而对于混杂模式下的Chrome,则无论通过document.body
和document.documentElement
中的clientWidth和clientHeight,都可以取得视口的大小。
虽然最终无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小。如下所示:
//在谷歌浏览器中:
<script>
var pageWidth= window.innerWidth,
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;
}
}
console.log("pageHeight为"+pageHeight);//pageHeight为625
console.log("pageWidth为"+pageWidth);// pageWidth为1366
</script>
//在IE浏览器中
<script>
var pageWidth= window.innerWidth,
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;
}
}
alert("pageHeight为"+pageHeight);//653
alert("pageWidth为"+pageWidth);//1366
</script>
//在火狐浏览器中
<script>
var pageWidth= window.innerWidth,
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;
}
}
alert("pageHeight为"+pageHeight);//632
alert("pageWidth为"+pageWidth);//1366
</script>
document.compatMode
确定是否属于标准模式。
在后面的学习中会讲到。感兴趣的可以自己百度查查吧!!
1、在移动设备中,window.innerWidth和window.innerHeight保存可见视口,也就是屏幕上可见页面区域的大小。
移动IE浏览器不支持这些属性。但通过document.documentElement.clientWidth
和document.documentElement.clientHeight
提供了相同的信息。随着页面的缩放,这些值也会发生变化。
2、在其他移动浏览器中,document.documentElement
度量的是布局视口,即渲染后页面的实际大小(与可见视口不同,可见视口是整个页面中的一部分。)
移动IE浏览器把布局视口的信息保存在document.body.clientWidth
和document.body.clientHeight
中。这些值不会随着页面的缩放发生变化。
您知道吗?
由于桌面浏览器存在的差异,最好先检测用户是否打开了移动设备,再决定使用哪个属性。
移动开发咨询师Peter-PaulKoch记述了他对移动设备视口的研究
或者:
对移动设备视口的研究
resizeTo()和resizeBy()方法
使用 resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接受两个参数,其中resizeTo()接收浏览器窗口的新宽度和新高度,而resizeBY()接收新窗口与原窗口的宽度和高度之差。
与moveTo和moveBy类似,被Opera和IE7(及更高版本)禁用。
累了吗???加油,婉秀是最棒的!!