Device pixels and CSS pixels – web side

Device pixelGives the screen resolution of any device you are using, which can be accessed through screen Get width / height.
But it is not immutable. For example, you can right-click “display settings” – “zoom and layout” to change. If the zoom is 100%, it is 19201080, then scaling 150% is 1280720

CSS pixelIs the pixel value you set in CSS for a DOM element, such as width: 100px; line-height:20px;

In JS, through window Devicepixelratio to obtain the ratio of the occupied physical pixel resolution to its own CSS pixel resolution.

Under normal circumstances (the web page is not scaled, or scaled to 100%), a CSS pixel will occupy a device pixel.
But if you zoom the page (Ctrl + scroll) to 200%. The CSS pixels will also be scaled by 200%, which will occupy twice the width and twice the height of the device pixels. The overall area is four times.

1px CSS pixels are equal to 1px device pixels when the page is not scaled

The web page starts to shrink, and one device pixel (dark part) overlaps several CSS pixels (light part)

The page starts to zoom in. On the contrary, a CSS pixel overlaps several device pixels

Note here that our focus is always CSS pixels, 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 (what was in the original style, but still how much now). It’s just that the layout is automatically stretched or squeezed by the browser.

Screen size
Our screens are usually like this

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

In JS, you can

screen.width
screen.height

The visit was. 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 the title bar, toolbar, favorites and so on.

In JS, you can

window.innerWidth
window.innerHeight

The visit was. Measured by CSS pixels, zooming in and out of a web page will change its value.

Someone will ask if it includes browser title bar, toolbar and favorites. How to get the height. Don’t worry, it’s down there

window.outerWidth
window.outerHeight

Due to window Innerwidth is measured by CSS pixels. When the browser is zoomed in, window innerWidth / window. Innerheight decreases, which shows that there is less content that can be placed in the window. That is, 1px CSS pixel stretch becomes larger
When the browser zooms out, window innerWidth / window. Innerheight will increase, showing that more content can be placed in the window. That is, 1px CSS pixel compression is reduced.

And window Outerwidth is actually measured by device pixels. Zooming in and out of a web page has no effect on its value. So window Innerwidth and window Outerwidth is one word short, but the internal processing is eighteen thousand miles short.

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

The horizontal and vertical offsets can be obtained through the following JS and measured by CSS pixels

window.pageXOffset 
window.pageYOffset

If you zoom in or out of the browser, the scroll offset also changes

Viewport size
Refers to the size of HTML elements, excluding scroll bars. Than window innerWidth / window. Innerheight is less than the size of a scroll bar. It has nothing to do with the size of the content in the web page. Get below

document. documentElement. clientWidth   //document. Documentelement points to an HTML element
document.documentElement.clientHeight

It is also measured by CSS pixels

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

document.documentElement.scrollWidth
document.documentElement.scrollHeight

Measured by CSS pixels

Article referenceA tale of two viewports — part one