直接进入主题
1.viewport尺寸：浏览器窗口尺寸。
document.documentElement.clientWidth/Height；随浏览器大小变化而变化，但宽度不包含滚动条宽度。
2.浏览器内部尺寸。
window.innerWidth/Height；随浏览器大小变化而变化，宽度包含滚动条宽度。
3.用户屏幕尺寸。
screen.width/height;用户不更换显示屏，尺寸就不会变化。
4.zoom level 缩放比例。
screen.width/widow.innerWidth
5.事件出发点的X、Y坐标。
client.pageX/Y:从html远点到事件被触发点；//99%用； clientX/Y:从浏览器窗口到事件被触发点；//0.99%用； screenX/Y:从显示器到事件被触发点；//0.01%用；
6.layoutviewport与visualviewport。
layoutviewport：布局viewport，永远不会变，就是你写的页面。
visualviewport：虚拟viewport，就是设备的屏幕大小，相同比例只能看到你写的页面的一部分，但可以通过缩小来查看你写的页面的全部。
参考：http://www.w3cplus.com/css/viewports.html