1.跨浏览器确定窗口的大小（典型的浏览器：IE9+、Firefox、Safari、Opera、Chrome等，等），有innerWidth、innerHeight、outerWidth、outerHeight这些属性可以获取浏览器或者视口的长宽信息，而document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息，并且还跟浏览器的模式有关，处于标准模式和混杂模式时（document.body.clientHeight），这些值还不尽相同。对于移动设备，这些属性也是可以获得视口，屏幕上可见页面区域的大小。注意布局视口是渲染后页面的实际大小，而可见视口只是整个页面中的一小部分。
2.一般用查询法来适应不同的浏览器，用typeof先查询类型，再做出其他处理。
3.突然发现移动端的特点：基本都是全屏显示。在控制大小方面有一定优势。
4.先判断是移动端还是电脑端，再决定用哪种属性。
5.resizeTo和resizeBy可以调整浏览器窗口的大小。by是接收新长度与旧长度的差。同样地，这样的方法可能被一些浏览器禁用，并且也都只能应用于最外层的window对象，不适用于框架。
6.桌面浏览器长度、宽度再理解：
1.设备像素，也就是平时我们说的屏幕的分辨率那个像。但是涉及到用户缩放浏览器页面，那么也会跟着改变。大体来说就是CSS像素是刚开始就设定好了，用户缩放时，CSS像素会跟着缩放而造成与设备像素有了大小区别。如缩放到200%，那么一个CSS像素会增长到一个设备像素的4倍，长和宽各两倍。而css像素才是决定样式表的呈现方式。在100%缩放下，它们是相等的。
2.屏幕尺寸是screen.width和scream.height,这个尺寸就是以设备像素为单位进行测量的，是不变的，是显示器的功能。
3.窗户尺寸：用来显示内容的页面尺寸（包含滚动条），不包含地址栏、标签栏。以css像素为单位。会随着用户的缩放而改变。例如，用户放大时，这两个属性会减小，因为css像素变大了，所以个数变少了。
4.window.pageXOffset和window.pageYOffset可以知道用户滚动了多少CSS像素，这两个值不会受到缩放的影响，为了使页面保持一致.
5.视口：功能是约束html元素，该元素是站点的最上方包含的块。不受CSS影响。它只是具有浏览器窗口的宽度和高度。
6.document.documentElement.clientHeight和document.documentElement.clientWight不包含滚动条。它不管其他的HTML元素，始终给出视口的长和宽。
7.元素本身的长和宽包含在offsetWidth和-height中。
8.鼠标事件的坐标：pageX和pageY（给出相对于html元素的坐标，以css像素为单位，使用最多）、clientX和clientY（给出相对于视口元素的坐标，以css像素为单位，使用一般）、screenX和screenY（给出相对于屏幕的坐标，以设备像素为单位，基本不使用）。
9.媒体查询：定义一些特殊的css规则。以某个宽度或者长度为界线来执行。media query width就是视口宽度。而media query device-width是设备宽度，以设备像素为单位。而移动端因为动不动就全屏，所以也比较关注device-width。
