content
It can be understood as a painting in life, but for developers, the code is the brush, and the content is the widest and highest rectangle on the page you draw in the development process. For example, the Riverside Scene on Qingming Festival is a painting with a very long content width.
Layout viewport
The layout viewpoint can be interpreted as a drawing board, which means the paper is only this big, and if you tried to draw a full-size qingming River scene on A4 paper, it would obviously overflow.
Note, however, that the layout viewport in development is not strictly defined, such that your label width is smaller than the inside
Visual viewport
The visual viewport is the width and height of the browser. But on the PC side, the browser window can be changed at will, we can see intuitively. On the Client side, most browsers on phones and tablets do not support changing the width and height of the browser, so the visual viewport is the size of the screen.
The early days of the smartphone
Content size, layout viewport, visual viewport unilaterally, the three have no connection, which is the early various browser manufacturers, development companies each fighting for their own situation, the direct result is that PC web pages on the Client compatibility is very poor, very messy.
Then the 980px layout viewport width was introduced, which means that on mobile browsers, the default layout viewport width is 980px, and the default developer uses code to draw the page on the 980px artboard. However, this leads to a situation where the 980px width is larger than the width of most mobile screens, and in order to display the page completely, you have to scale the original page, and if you don’t scale it, you have to drag it left and right to browse.
Example 1:1280px width default style in Safari with no viewport tag set:
The meanings of the above parameters are: Browsers default developers to develop on a 980px artboard, but developers actually develop 1280px content, but since it’s on a mobile phone, the physical size of the phone is 375px, so the browser zoomed the content 375:1280 to make it look full. The display is complete and there is no scrolling. Of course, this is the initial processing, which means that when the page opens, you can still zoom in and the scrollbar will appear.
“Initial-scale =1.0”; Because of this, for a 980px layout viewport width, only zooming or scrolling will show the full content. Most browsers use zooming by default, so the image above is scaled at 375:1280 to show the full content.
In the example above,
= initial-scale=1.0″> = initial-scale=1.0″> = initial-scale=1.0
The layout viewport actually has no effect relative to its actual effect (physical meaning or relative to the user). The layout viewport is actually more meaningful to the developer because it requires the developer to develop at this width. Only if the layout viewport is developed at the ideal viewport width. The resulting page is more compatible, visual and experiential. In the example above,
It’s just that if you use width=device-width in your actual development, with the ideal viewport, the end result is that all your content can be proportionally displayed on the phone screen without sliding (left or right). It’s like you’re painting, it’s leaking, it’s on the table, is that you haven’t finished? No, it’s just visually bad
The emergence of the ideal viewport
So Jobs stepped in and said,
- Layout Viewport width = Visual viewport width = Device Width (= Content Width)
Of course, THE final content width is my own, because when developing mobile pages, including the left and right spacing, we should actually layout the content according to a specific phone size, and finally use the appropriate layout scheme for development, so that it can be compatible with most phones.
On mobile phones, the width of the viewport is the width of the device because the size of the browser cannot be adjusted.
- Layout viewport width = Visual viewport width
Meaning:
- Content width = Layout viewport width
It makes sense that during development, the content should not be wider than the width of the layout viewport. It’s like printing a newspaper. What do you mean you always spray ink on the outside of the newspaper?
- Layout viewport width = Visual viewport width
The visual viewport width has been explained, that is, the width of the browser window. The visual viewport width is the width of the browser window, as opposed to the PC side where the browser window can be adjusted. In contrast to a client that cannot be resized, the width of the visual viewport is the size of the device screen. The point of having these two equal widths is to allow the device to display the full width of the content, which means that instead of sliding left and right, you can slide up and down. It’s this idea of a layout that creates the habit of viewing content from the top down.
In fact, even if you layout viewport = viewport width, in the case that the content width does not equal the layout viewport width, what will happen is that the content is too wide and needs to be scaled to display the entire content, but this will cause the content to shrink and look hard. But if you can only show a portion of the width without shrinking it, you need to swipe left and right.
So Jobs proposed the concept of the “ideal viewport”, which standardized the development behavior, relatively unified the configuration of browser manufacturers, and satisfied the user habits. From this, 3 aspects achieved a kind of standardized unity.
extension
Jobs’s concept of the ideal viewport was significant, not only because it set a standard for developers, browser makers, and users, but also because it was the basis for many subsequent layouts. With the concept of screen width = layout width, layout schemes are based on this standard, which has led to responsive layouts and percentage layouts developed separately for mobile.
