Device pixels and CSS pixels-web

Device pixel gives the screen resolution of any device you are using, which can be obtained through screen.width/height.
But it is not unchangeable. For example, you can use the right mouse button to change "Display Settings"-"Zoom and Layout". If zoom 100% is 1920 1080, then zoom 150% is 1280 720

css pixel is the pixel value you set in css for a certain dom element, such as width: 100px; line-height: 20px;

In js, the ratio of the occupied physical pixel resolution to the CSS pixel resolution is obtained through window.devicePixelRatio.

Under normal circumstances (the web page is not zoomed, or zoomed to 100%), one CSS pixel will occupy one device pixel.
But if you zoom the webpage (ctrl+wheel) to 200%. Then the css pixels will be scaled by 200% equally, which will occupy 2 times the width and 2 times the height of the device pixels. The overall area is 4 times.

When the web page is not zoomed, 1px CSS pixel is equal to 1px device pixel

The web page begins to shrink, and one device pixel (the dark part) overlaps several css pixels (the light part)

The webpage starts to zoom in, on the contrary, one CSS pixel overlaps several device pixels

Note here that our focus is always the css pixel, because it is closely related to the style part of our html.
Here when zooming out and zooming in. The pixel size of our css has never changed (how much it was in the original style, and how much it is now). It's just that the layout is automatically stretched or squeezed by the browser.

Screen size
Our screen is usually like this

The size of the screen is the size of the computer monitor screen

Can be passed in js

screen.width
screen.height

Get access. Measured by device pixels.

Window size
It is the available space (including the size of the scroll bar) left for web page display in the browser, except for the title bar, toolbar, favorites, and so on.

Can be passed in js

window.innerWidth
window.innerHeight

Get access. Measured by css pixel measurement, zooming in and out of the web page will change its value.

Then someone will ask if it includes the browser title bar, toolbar, and favorites. How to get the height. Don't worry, it's below

window.outerWidth
window.outerHeight

Because window.innerWidth is measured by css pixels. When the browser is zoomed in, window.innerWidth / window.innerHeight decreases, which shows that the content that can be placed in the window becomes less. That is, the 1px css pixel stretch becomes larger
When the browser shrinks, window.innerWidth / window.innerHeight will increase, which shows that more content can be placed in the window. That is, 1px css pixel compression is reduced.

The window.outerWidth is indeed measured by the device pixels, zooming in and out of the web page has no effect on its value. So window.innerWidth and window.outerWidth are one word difference, but the internal processing is a thousand miles away.

Scroll offset
Indicates the distance of the scroll bar from the initial position.

The horizontal and vertical offsets can be obtained through the following js respectively, which is measured by css pixels

window.pageXOffset 
window.pageYOffset

If the browser is zoomed in or out, the scroll offset will also change

Viewport size
Refers to the size of the html element, excluding scroll bars. The size of the scroll bar is less than window.innerWidth / window.innerHeight. It has nothing to do with the size of the content on the page. Get it through

document.documentElement.clientWidth   //document.documentElement指向 html元素
document.documentElement.clientHeight

Is also measured by css pixels

If you also want to get the size of the page that contains the part of the page that is hidden by the scroll bar. You can use the following

document.documentElement.scrollWidth
document.documentElement.scrollHeight

Measured by css pixels

This article refers to A tale of two viewports — part one