关于viewport的几个width

 

     直接进入主题

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