The role of HTML5 in developing mobile app--viewport

The role of HTML5 in developing mobile app--viewport

When you use HTML5 to develop mobile apps or mobile Web pages, the,

<meta name= "viewport" content= "width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0, User-scalable=no; "/>

What is viewport

The mobile browser is to put the page in a virtual "window" (viewport), usually this virtual "window" (viewport) wider than the screen, so that you do not have to squeeze each page into a very small window (this will destroy the layout of the page without the optimization of the mobile browser), Users can view different parts of a Web page by panning and zooming. The mobile version of Safari has recently introduced the viewport META tag, which allows web developers to control the size and scale of viewport, as well as the basic support of other mobile browsers.

Width: controls the size of the viewport, you can specify a value if 600, or a special value, such as device-width for the width of the device (in pixels of the CSS when scaled to 100%).
Height: corresponds to width, specifying height.
Initial-scale: The initial zoom ratio, which is the scale at which the page is first load.
Maximum-scale: allows the user to zoom to the maximum scale.
Minimum-scale: The minimum scale to which the user is allowed to zoom.
user-scalable: Whether the user can manually scale

　　"Viewport", translated into Chinese can be called "viewport", we all know that the mobile device screen is generally much smaller than the PC, WebKit browser will be a large "virtual" window map to the mobile device screen, The default virtual window is 980 like wide (the standard width of most web sites currently), and then scaled by a certain scale (3:1 or 2:1). That is, when we load a normal Web page, WebKit will load the Web page with a 980-pixel browser standard and then reduce it to a width of 490 pixels. Note that this reduction is a global narrowing , which means that all elements on the page will shrink. As shown, the effect of a regular article page on the mobile device:

　　The page is loaded with 980 pixels without distortion, but when scaled, many things are almost invisible to the naked eye.

So can we artificially change the WebKit's vision? Of course, you can add the following viewport code between

<meta name= "viewport" content= "width=500"/>

Let's take a look at the page plus Force viewport Size commandWhat about the effect? As shown: So is there a better way? For example, we automatically detect the size of the mobile device screen and then adapt the content. Look at the code below, Device-width will automatically detect the screen width of the mobile device：

<meta name= "viewport" content= "Width=device-width"/>

The role of HTML5 in developing mobile app--viewport