两个视口

一些API

• screen.width：设备物理宽度，固定不变，如果设备设置了缩放。该值会改变
• window.innerWidth：窗口的css像素，包括scrollbar
• pageYOffset：滚动偏移。缩放时不改变，因为浏览器为了保证一致性，缩放时自动保持浏览位置不变。
• document.documentElement.clientWidth：视口宽度，不包括scrollbar，即便给html设定宽度，也是视口宽度，只对html根元素特殊，其他元素正常。The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).
  • 与window.innerWidth区分：The fact that we have two property pairs is a holdover from the Browser Wars. Back then Netscape only supported window.innerWidth/Height and IE only document.documentElement.clientWidth and -Height. Since then all other browsers started to support clientWidth/Height, but IE didn’t pick up window.innerWidth/Height.
  • document.documentElement.offsetWidth存储html元素本身的尺寸

点击事件

• pageX/Y相对于html元素的css像素偏移(90%)
• clientX/Y相对于视口的css像素偏移(10%)
• screenX/Y相对于屏幕的设备像素偏移(no)

媒体查询

• width/height和clientWidth/height相似，与视口的css像素相对应
• deviceWidth/height和screen.width/height相似，与屏幕设备像素相对应