JavaScript的BOMwindow对象之窗口大小（四）

àì夳堔傛蜴生んèń 2022-02-05 02:47 200阅读 0赞

跨浏览器确定一个窗口的大小不是一件简单的事。  
**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提供了页面可见区域的相关信息。  
![在这里插入图片描述][20190504155759473.png]  
还有点知识点还没说，哈哈！！！既然代码重要，理论知识也重要吧！

--------------------

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记述了他[对移动设备视口的研究][Link 1]  
或者：  
[对移动设备视口的研究][Link 2]

--------------------

## resizeTo()和resizeBy()方法 ##

使用 **resizeTo()和resizeBy()方法可以调整浏览器窗口的大小**。这两个方法都接受两个参数，其中**resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBY()接收新窗口与原窗口的宽度和高度之差。**  
与moveTo和moveBy类似，被Opera和IE7（及更高版本）禁用。

--------------------

累了吗？？？加油，婉秀是最棒的！！

[20190504155759473.png]: /images/20220205/095610e33d7b41b9bf087d4ab63dce0b.png
[Link 1]: http://t.cn/zOZs0Tz
[Link 2]: https://quirksmode.org/mobile/viewports2.html