直接进入主题
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