Window viewport

Window viewport

    严格等于浏览器的窗口，在桌面浏览器中，viewport就是浏览器窗口的宽度高度，但在移动端中，viewport太窄，所以提供了两个viewport：虚拟的viewport visualviewport和布局的viewport layoutviewport。

1. The layout viewport is a large frame that cannot be changed in size or shape. It can be much larger than the visual viewport and contains elements that appear on the screen but cannot be seen by the user. (Just like the mobile page is enlarged by the user, the user only sees the visual viewport. You can change the size and shape of the visual viewport to see different content, but the size and shape of the layout viewport will never change. Will change)
2. The visual viewport is part of the page displayed on the current screen.

---

Pixels of device and pixels of css (pixels)

   设备的像素为标准的像素宽度，在大多数情况下等于screen.width/height。现代浏览器的缩放（zoom）是基于伸展pixels，结果是html元素上的宽度并没有因为缩放200%而由128px变为256px，在形式上依然是128 css的像素，即便他占用了256设备的像素，将一个单位的CSS的像素变成了4倍的设备的像素那么大，即高度*2、宽度*2，面积扩大了4

100% zoom: when the zoom level is 100%, the pixel of 1 unit of CSS is strictly equal to the pixel of 1 unit of device

Screen size

screen.width/height
-meaning: the full size of the user's screen
-measurement: device pixels
-compatibility: all are measured in css pixels

Window size

window.innerWidth/Height
-Meaning: the full size of the browser including the scroll bar size
-Measurement: CSS pixels
-Compatibility: IE does not support, Opera uses device pixels to measure
-When the user zooms in, the browser window that can be obtained The available space will be reduced, and window.innerWidth/Height is the reduced ratio

Scrolling offset

window.pageX/YOffset
-Meaning: the displacement of the page, which defines the horizontal and vertical displacement of the page relative to the origin of the window, and how far the scroll bar can be positioned by the user (including scroll bars)
-Measurement: css pixels
-compatible Performance: Not supported in IE8 and earlier versions of IE, use document.body.scrollLeft and document.body.scrollTop instead (not including scroll bars)

Measure html elements

document.documentElement.offsetWidth/Height
-meaning: the size of html
-measurement: pixels of css
-compatibility: IE uses this value to indicate the size of the viewport instead of html

Event coordinates

• pageX/Y: css pixels from the html origin to the event trigger point
• clientX/Y: css pixels from the origin of the viewport (browser window) to the event trigger point
• screenX/Y: the pixels of the device from the origin of the user's display window to the event trigger point