Concept: Device Pixels and CSS Pixels
Device pixels: usually available through screen.width/height
If you set an element width to 128px and your monitor is 1024px, maximize the browser window, the element takes up 1/8 of the monitor. At 200% scaling, the element occupies 1/4 of the display.
Scaling in modern browsers just stretches by pixels, that is, the element doesn't go from 128px to 256px; the element is still 128 css pixels, even though it occupies 256 device pixels. That is, when zoomed by 200%, 1 css px becomes four device px;
At 100% zoom, 1 css px covers exactly 1 device px:
enlarge:
Zoom out:
Here we are concerned about css px, because css px controls how the style sheet is rendered. The browser will automatically ensure that your css layout stretches and shrinks.
Now we have a clear definition, when zoom is 100%:
1 css px = 1 device px
This concept is useful for explaining what follows. In desktop browsers, css px will ensure the same size ratio between your layout elements no matter how you zoom.
screen size
Let's look at some practical measurements. First screen.width/height. They are the width and height of the screen. These sizes are based on device pixels, as they are immutable, a feature of the display that does not suit the browser.
window size
What you want to know, however, is the size of the inner browser window (ie, the window that displays the body of the web page). This is related to your css layout. You can get it with window.innerWidth/innerHeight.
Apparently, window.innerWidth is measured in css px. You need to know how many elements you can fit in the browser window, and the number of elements decreases as the user zooms in on the browser. So, if the user zooms in on the browser, you have less free space and window.innerWidth/Height becomes smaller. (This is not the case with the opera browser. When the user zooms in, the window.innerWidth/Height does not become smaller. They are measured in device px. It is a bit annoying on the computer, but the mobile terminal is more deadly. . )
Remember: window.innerWidth/Height includes scrollbars.
Scrolling offset
window.pageXOffset/pageYOffset, representing the horizontal and vertical scrolling offset of the document. With them you can see how much the user has scrolled.
These properties are also measured in css px. In theory, when the user scrolls up and zooms in, window.pageXOffset/pageYOffset will change. However, the browser tries to stay in the same element position as the user zooms.
Concept: the viewport
Now we introduce some other concepts: the viewport (window), the role of the viewport is to constrain the html element, you can understand it as the upper element of the html element.
It sounds a bit confusing to chew on the roots, so let's give some practical examples. Suppose you have a fluid layout where the width of the sidebar is 10%; when you zoom the browser window, the sidebar also zooms. How is this achieved?
Technically, the sidebar is 10% of the width of its parent element, possibly <body>, the question becomes who inherits the width of <body>.
Normally, block elements are 100% of the width of their parent element; so <body> has the same width as <html> .
So, where does the width of the <html> element come from? Its width is the width of the browser window. That's why the width of the sidebar is 10% of the width of the browser window, which is clear to all developers.
You may not know how this is achieved. In theory, the width of the <html> element is limited to the width of the viewport. That is, the <html> element occupies 100% of the viewport.
The viewport is the browser window. viewport is not the structure of html, so you can't define it with css. On the computer side it just has the width and height of the browser window, on the mobile side it is a little more complicated.
Consequences
This situation has some strange consequences. You can see one on this page. Scroll to the top, zoom in two or three times, and the content on the page extends beyond the browser window.
Scroll to the far right and you will see that the blue bars are not connected.
This result is how the viewport is defined. I gave the blue bars 100% width. 100% against whom? It must be the <html> element, which has the same width as the viewport, which is the same as the browser window.
Device Pixels, Independent Device Pixels, Physical Pixels, Logical Pixels, Pixel Ratio
1. Concept
for constraining html elements
1. layout viewport , which is the default viewport of this browser
2. visual viewport , browser viewport viewport
3. ideal viewport , the ideal viewport for mobile devices
the user's visible area of a web page: the user's visible area of the web page
- Browser zoom in and out