这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
前言
今天我们来谈一谈web端和移动端窗口，这是前端工程师离不开的问题，也是需要下功夫了解通透的问题。今天做项目的时候就感觉到了窗口布局的重要性，其中的巧妙很有研究性，今天也不谈技巧，就单单来讲一讲窗口吧。
窗口的大小
在不同浏览器中确定浏览器窗口大小没有相象中那么容易。所有现代浏览器都支持4个属性: innerWidth、innerheignt、outerWidth和 outerHeight。outerWidth和 outerHeight返回浏览器窗口目身的大小（个官是在最外层 window上使用，还是在窗格中使用)。innerWidth和innerHeight 及凹测览器窗口中页面视口的大小（不包含浏览器边框工具栏)。
document.documentElement.clientwidth和 document .docume ntElement.clientHeight
返回页面视口的宽度和高度。 如下所示:
浏览器窗口自身的精确尺寸不好确定,但可以确定页面视口的大小,
let pageWidth =window. innerWidth,
pageHeight =window. innerHeight;
umber" ){
if (typeof pagewidth != "nt
if（document .compatMode
二= "csS1Compat"){
.clientWidth;
pageWidth = document.documentElement.
pageHeight = document.documentElement.clientHeight;}else {
pageWidth = document .body.clientWidth;
. body.clientHeight;
pageHeight = document
}
innerWidth 和window.pageHeight 的值分别设置为windth这里，先将 paaeWidth 和通过document.compatModeWidth 是不是一个数值，如果不是innerHeiaht然后.检查 pagentElement.clientWidth 和如果是，则使用 document.docume来检杳页面是否外为标准模式。
移动设备上的窗口大小
document. document Element. clientHeight;否则，就使用 doc ument.DouY 出Hcw1ath和 document .body .clientHeigh 在移动设备下, window.innerwidth和window.innerHeight 返回视口的大小,就是屏幕上 页面可视区域的大小,Mohile Internet Fxnlorer保持这些属性，但在 DCument.aocuencLL ement . clientWidth 和 doument donument Flement .clientHeight中提 供了相同的信息。在放大或缩小 页面时,这些值也会相应变化。 在其他移动浏览器中,documen .documentElement.clientWidth和 clientHeiaht返回的布局视口的大小,即渲染页面的实际大小。布局 document .documentElement. 可见视口只能显示整个页面的 视口是相对于可见视口的概念, ·小部分。Mobile Internet Explorer document .body .clientHeight中 在放大或缩小页面时,这此 因为桌面浏览器的差异，所以需要先确定用户是不是在使用移动设备,然后再决定使用哪个属性。
与移动端窗口一样，缩放窗口的方法可能被浏览器禁用，而且在某些浏览器中默认是禁用的。同样，缩放窗口的方法只能应用到最上层的Windows对象。
注意手机视口的概会比较复杂多样的问题。如果读者在做移动 rts- Part Two"。 Peter-Paul Koch发表在OirksMode 网站上的文章“ATale ofTwo Viewpo 收两个参数,resizeTo() 可以使用resizeTo()和recizeBv()方法调救窗口大小这两个方法都接 接收新的宽度和高度值,而resizeB ()接收宽度和高度各要缩放多少。下面看个例子:
//缩放到100×100
window.resizeTo (100, 100);
//缩放到200×150
window.resizeBy (100，50）;
//缩放到300×300
window.resizeTo (300,300）;
这些浏览器中默认是禁用的 与移动窗口的方法一样,缩放窗口的方法可能会被浏览器禁用,而且在某! 同样,缩放窗口的方法只能应用到最上层的 window对象。 ·小部分。Mobile Internet Explorer document .body .clientHeight中 在放大或缩小页面时,这此 因为桌面浏览器的差异，所以需要先确定用户是不是在使用移动设备
