Viewport的概念
Viewport
电脑上面的Viewport概念
电脑上面的viewport概念比较简单，就是可视化区域。
里面有几个关键点
screen.width,screen.height:
屏幕的宽高(设备像素)
下面的单位都是像素。
window.innerWidth，
window.innerHeight:视窗内部宽(包含滚动条)，视窗内部高(包含滚动条)
window.pageXoffset,
window.pageYoffset:文档的偏移
document.documentElemnet:就是HTML元素，
document.documentElement.clientWidth，
document.documentElement.clientHeight:可视化区域也就是视窗(viewport)的宽，视窗的高
document.documentElement.offsetWidth,
document.documentElement.offsetHeight:文档的宽高。
像素是逻辑单位。例如视窗宽高400px，当缩放200%的时候，视窗宽高200px。因为缩放两倍的时候，一像素扩充覆盖了两倍像素的大小。
事件里面的像素
事件里面包含了不少于5个关于位置的属性。常用的是
pageX,pageY:文档中的坐标
screenX,screenY:屏幕中的坐标
clientX,clientY:视窗中的坐标
其中pageX，pageY可以满足90%的需要，剩下用一下clientX，clientY就足够了。
手机上面的Viewport概念
手机里面的Viewport概念比较复杂。有 LayoutViewport 和 VisualViewport。LayoutViewport是浏览器虚拟的一个视窗用来兼容显示桌面网站。苹果开始以一个扩展的方式引入了这个概念，手机上的safari默认宽为980px，后来其他浏览器也引入了此概念，只不过viewport宽度有些不同。
