Mobile web development-view and web development view

Mobile web development-view and web development view

This article mainly records the classification of mobile terminal video ports and other knowledge. Before starting, let's take a look at a typical example:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1"> @ media screen and (max-width: 480px) {// a style with a width not greater than PX}

The above code is believed to be frequently written during mobile development. It studies two things: meta-view and width-based media queries. Generally, we call the above Code the media query function of CSS3. The media query function can be used to display desktop-level web designs in different sizes on mobile terminals.

I. pixels

Describe the pixels before studying the viewport. Pixel is the foundation of web page layout, and web developers use it intuitively.

A pixel is the smallest area of a computer screen that can display a specific color.

In fact, there are two kinds of pixels

• Device pixel: The physical pixel of the device screen. The number of physical pixels of any device is fixed.
• CSS pixels: an abstract layer created for Web developers and used in CSS (and JavaScript.

Note: In the web development process, we basically use CSS pixels, which are basically not used by devices. For example, the elements of width: 200px span over 200 CSS pixels. The number of device pixels that CSS pixels are equivalent to depends on the characteristics of the screen (whether it is high density) and user scaling. The larger the user's magnification, the more device pixels a CSS pixel overwrites. Therefore, this element may not necessarily overwrite the equivalent device pixels of css. On the old screen, when the scale is 100%, a CSS pixel equals a device pixel. On high-density screens, such as Apple's Retina screen, a CSS pixel spans multiple device pixels. Comparison:

(CSS pixels in red and device pixels in blue)

In our development process, we operate on CSS pixels so that CSS pixels can overwrite device pixels. However, when we use CSS and JavaScript, we don't actually care about how many device pixels a CSS pixel spans. This computing relies on screen features and user scaling is done by the browser.

2. Three Views

We often use Code such as width: 35% for layout during development. It indicates the percentage width of the parent element. We can see that the structure of the html document knows that the outermost layer is an html element. So what are the blocks of html elements? That is to say, the viewport. In the standard CSS document, it is called an initial inclusion block. This initial inclusion block is the root cause of all CSS percentage width estimation. (On the desktop, the width of the viewport is the same as that of the browser window ).

1. layout the viewport

Mobile devices that use the same width as the browser window will cause ugly results. Imagine. A table-level left and right structure page layout, 20% of the browser window on the left side, 80% on the right side. Such a page scales very small on the mobile device of our small screen. It may overwrite most of the data, or cause data occlusion to fail to display all of the data.

Therefore, mobile browser vendors must ensure that our pages can be displayed well even in a narrow screen, and they design the width of the view to be much wider than the screen width. In this way. On the Mobile End, the screen width of the browser on the Mobile End is completely independent of the browser on the Mobile End. We call it a Layout View. The CSS layout is calculated and constrained based on it.

Let's take a look at the following legend to see the layout of the viewport.

2. Visual View

Although the independent layout of the viewport greatly helps the desktop website transition to the mobile phone. However, we cannot completely ignore the screen size on mobile devices. So it's time to describe the Visual View.

The visual view is the area of the website you are seeing. You can zoom in and out to operate the visual view without affecting the Layout View. The Layout View is still kept at the original width.

Let's take a look at the Visual View area.

For example, the area between the red arrows is the area of the Visual View. It is as wide as the screen of the device, and the number of CSS pixels changes as the user scales.

3. Ideal

The default layout width is not an ideal width. Obviously, the user hopes to have an ideal browsing and reading size without scaling when entering the page. The ideal viewport is still prepared for mobile devices. It takes effect only when you manually add the meta view label. If there is no meta view label, the layout will maintain its default width.

The following code tells the browser that the width of the layout view should be consistent with that of the ideal view. (In general, we will set the layout of the viewport to the same width as the device width, and then write a set of display solutions for mobile terminals using css media queries .)

<meta name="device" content="width=device-width">

Defining an ideal view is the work of a browser, not the work of a device or operating system. In addition, it is recommended that you write the meta view in the typical example at the beginning of this article.

Iii. Summary

This article introduces css pixels and device pixels. Developers basically use css pixels in development.

Three kinds of views are introduced.

Layout View: it is no longer associated with mobile browsers and is completely independent. In fact, the layout of the viewport is much wider than the screen width.

Visual View: the display area of the website you see. Generally, the visual view is consistent with the width of the device. In addition, the number of CSS pixels changes with the user's scaling.

Ideal viewport: set to make the website have the best browsing and reading width on the Mobile End. You need to manually add meta view labels to notify the browser. It works with css media queries to develop mobile display solutions.

The content of the view is just a part of what I can understand. It is easy to understand something in development. However, in the past, I also introduced a lot of device pixel ratio judgments. Because I have never used it in development. Therefore, it is ignored. You should first understand what you can understand. If any error occurs, please correct it.

Thank you for reading.